CSS 변수에 대해 당신이 몰랐을 수도 있는 것들!-CSS 튜토리얼-php.cn

이 글에서는 CSS 변수를 살펴보고 CSS 변수에 대해 아무도 알려주지 않는 내용을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS 변수에 대해 당신이 몰랐을 수도 있는 것들!

CSS 변수는 훌륭하지만 자세한 내용을 알고 계시나요? [추천 학습: CSS 变量很不错哦，但是你知道它们的详情？【推荐学习：css视频教程】

1. 小心 !important

与 CSS 变量一起使用 !important 有点诡异，如下面的示范：

p {
  --color:red !important;

  color:var(--color);
  color:blue;
}

로그인 후 복사

上面的 p 元素会是什么颜色呢？你会认为是 red 红色吧，认为按如下代码执行：

p {
  color: red !important;
  color: blue;
}

로그인 후 복사

但是，并不是 red 红色，因为实际执行是这样：

p {
  color: red;
  color: blue;
}

로그인 후 복사

在这种情况下，!important 并不是 color 的一部分，而是增加了 --color 变量的特性。规范中指明：

注意：自定义属性可以包含 !important ，但是会被 CSS 解析器自动从属性中删除，这将自定义的属性 important 变成层级。换言之， !important 并不是不会起作用，而是在语法检查之前就被忽略了。

下面这个例子你会更容易明白：

p {
  --color: red !important;
  --color: blue;
  
  color: var(--color);
}

로그인 후 복사

上面的代码会赋予 p 元素红色，解析如下：

我们对 --color 属性有两次的声明，所以我们需要解决其层级的问题。第一次的定义带有 !important ，所以它的层级相对高
接着 var(--color) 将会应用 red !important
所以我们会得到 color: red

再来看一段代码：

p{
  --color: red !important;
  --color: blue; 

  color:var(--color);  color: pink; <!-- 这里我改写的颜色值 -->
}

로그인 후 복사

按照上面的逻辑，我们最后会得到粉红色 pink 的段落颜色。

一个很重要的规则是应当将 CSS 变量（自定义属性）看作普通属性，而不仅仅是存储值的变量。

自定义属性是普通属性，所以它们可以被定义在任何的元素上，可以使用普通属性的继承和联级规则解决，可以使用 @media 和其他条件规则进行条件处理，可以用于 HTML 的 style 属性，可使用 CSSDOM 读取和设置等等。

2. 它们不可以存储 urls

总有一天你会偶然发现这个常见的限制。

你不能这样做 ❌

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
}

로그인 후 복사

你应该这样做 ✅

:root {
  --url:url("https://picsum.photos/id/1/200/300");
}
.box {
  background:var(--url);
}

로그인 후 복사

这个限制有关 url() 是怎么解析的。解析起来有点棘手，推荐你到 Stack Overflow Answer 上找答案。正如你所见，我们修复起来很容易，把 url() 整个赋予变量即可。

3. 它们可以无效的值变有效

这也是我喜欢的点之一，也是让人头疼的点。

我们以一个基础的案例入手：

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

로그인 후 복사

.box 元素将会有一个红蓝渐变的效果，对吧？然而却是纯红色。嗯，我打错了 linear-*css 동영상 튜토리얼

]

CSS 변수에 대해 당신이 몰랐을 수도 있는 것들!

1. 주의하세요!중요

CSS와 함께 사용하세요 변수 !important는 다음 데모에서 볼 수 있듯이 약간 이상합니다.

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

로그인 후 복사

위의 p 요소는 어떤 색상이 될까요? red 빨간색이라고 생각하고 다음과 같이 실행된다고 생각하세요. CSS 변수에 대해 당신이 몰랐을 수도 있는 것들!

.box {
  --color:10px; /* a "valid" variable */
  background: red; /* a "valid" declaration */
  background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one  */
  /* The result is an "invalid" value ... */ 
}

로그인 후 복사

하지만 실제 실행은 다음과 같기 때문에 red 빨간색은 아닙니다.

:root {
 --p: 10px;
}
.box {
  padding: var(--p);
}

로그인 후 복사

이 경우 !important는 color의 일부가 아니지만 --color 변수의 특성을 추가합니다. 사양에 지정됨 :

참고: 맞춤 속성에는 !important가 포함될 수 있지만 CSS 파서에 의해 속성에서 자동으로 제거됩니다. 중요한 속성 레이어가 되어 보세요
. 즉, !important가 작동하지 않는 것이 아니라 구문 검사 전에 무시되는 것입니다.

🎜다음 예를 보면 이해하기 쉽습니다. 🎜

:root {
 --p: 10;
}
.box {
  padding: calc(var(--p)*1px);
}