CSS [자세한 설명] 사용자 정의 속성(CSS 변수라고도 함)

2024-07-12

변수 선언 - -

변수 명명 규칙

숫자 명명 지원
대시와 공백을 사용한 이름 지정 지원
중국어 및 기타 CJK 텍스트 지원
$, [,], ^, (,), %, " 등과 같은 특수 문자가 포함된 이름은 지원되지 않습니다. 이러한 특수 문자를 사용하려면 백슬래시 이스케이프를 사용해야 합니다.

변하기 쉬운

임의의 값이 될 수 있습니다.표현

 --direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);
1
2
3
4

가변 범위

하위 요소는 상위 요소에 의해 설정된 CSS를 변경 없이 상속할 수 있습니다.사용자 정의 속성값.

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}
1
2
3
4
5
6

전역 변수

:root {
  --borderColor: #ccc;
}
1
2
3

변수의 특성

변수값은 서로 전달 가능

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}
1
2
3
4

CSS 변수는 자신에게 값을 할당할 수 없습니다.

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);
1
2

CSS 변수는 @media 미디어 기능의 값으로 사용할 수 없습니다.

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}
1
2
3
4
5

콘텐츠 속성 값인 CSS 변수는 아무런 영향을 미치지 않습니다.

/* 无效 */
.bar::before {
    content: var(--percent);
}
1
2
3
4

변수 var() 사용

p {  
   background-color: var(--any-what, deepskyblue); 
}
1
2
3

딥스카이블루는기본값, –any-what이 유효하지 않은 경우 deepskyblue를 사용하십시오.

var() 함수 매개변수가 잘못된 경우

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}
1
2
3
4
5

background-color의 초기값이 투명하므로 본문의 최종 배경색은 투명합니다.

var() 함수의 첫 번째 매개변수 값이 유효한 한, 매개변수 값이 엉망이더라도 정상적으로 구문 분석됩니다. 첫 번째 매개변수 값이 불법인 경우 var() 함수는 현재 CSS 속성의 초기 값 또는 상속된 값(상속이 있는 경우)으로 확인됩니다. 즉, unset 전역 키워드의 규칙에 따라 렌더링됩니다. (렌더링 규칙은 유사하며 unset 키워드를 직접 설정하는 것과 동일하지 않습니다.)

var() 함수의 후행 공백 기능

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}
1
2
3
4
5
6
7
8

최종 본문 글꼴 크기는 14px입니다.

원칙: 여기서 글꼴 크기:var(–size)px는 글꼴 크기:20px와 동일합니다. 20 뒤에 공백이 있는데 이는 잘못된 글꼴 크기 속성 값입니다. var(-size)px는 문법적으로 유효하므로, 글꼴 크기:16px가 재설정되고 결국 상위 요소에 설정된 글꼴 크기인 14px가 사용됩니다.

개선 계획은 다음과 같습니다.

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}
1
2
3
4

또는

body {
    --size: 20px;   
    font-size: var(--size);
}
1
2
3
4

Node.js는 CSS 전역 변수의 값을 얻습니다.

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
1

// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);
1
2
3
4

Node.js는 CSS 전역 변수의 값을 수정합니다.

document.documentElement.style.setProperty("--borderColor","green");
1

js는 CSS 지역 변수의 값을 설정합니다.

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
1
2
3

box.style.setProperty('--color', 'deepskyblue');
1

실제 사례

CSS 카운터를 사용하여 페이지에 CSS 변수 값을 표시합니다.

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
1
2
3
4
5

진행 표시 줄

https://blog.csdn.net/weixin_41192489/article/details/121007837

여러 곳에서 사용되는 svg 이미지

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

효과 보기 https://demo.cssworld.cn/new/8/1-3.php

버튼 클릭 효과

효과 보기 https://demo.cssworld.cn/new/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

구현원리

–open:; 앞에 공백이 있습니다. 즉, –open 속성 값은 구문상 유효할 수 있는 공백입니다.그러나 box-shadow 및 background와 같은 CSS 속성에는 공백이 유효하지 않습니다. 따라서 box-shadow 및 background와 같은 CSS 속성은 초기 값으로 해결됩니다.
:active 의사 클래스를 트리거하는 버튼을 클릭하면 CSS 문 –open:inherit가 실행됩니다. 전역 CSS 키워드는 CSS 사용자 정의 속성 값으로 유효하지 않아야 하므로 var() 함수는 백업 CSS 속성을 사용합니다. 렌더링 값입니다.

사용자 정의 CSS 함수 키워드()

https://blog.csdn.net/weixin_41192489/article/details/121021277

attr() 함수 시뮬레이션

https://blog.csdn.net/weixin_41192489/article/details/121022170

기술나눔