CSS-非常有用的css变量

为什么使用 css variables#
借用Scrimba上的：

easier to get started (no transpiling)
have access to the DOM
1.local scopes
2.change width Js
3.ideal for responsiceness
perfect for themes
什么是 CSS 变量#
CSS 变量当前有两种形式：

自定义属性。
这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即是一个 css 声明语句。意思是将 20px 赋值给--example-varibale 变量。
变量。www.zztjfk.com/
就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用 var()函数使用变量。例如：var(--example-variable)会返回--example-variable 所对应的值
总结：
带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 var()函数使用。

补充

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。www.4000131666.com/
CSS 变量并不支持 !important 声明，注意只是声明。

初始值 see prose
适用元素 all elements
是否是继承属性 yes
适用媒体 all
计算值 as specified with variables substituted
Animation type discrete
正规顺序 *per grammar
CSS 变量的继承#
Copy
html

<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
<div></div>
</div>
</div>
Copy
css

.two {
--test: 10px;
}
.three {
--test: 2em;
}
在这个例子中，var(--test)的结果是：

class="two" 对应的节点: 10px
class="three" 对应的节点: element: 2em
class="four" 对应的节点: 10px (inherited from its parent)
class="one" 对应的节点: 无效值, 即此属性值为未被自定义 css 变量覆盖的默认值
:root#
:root 这个 CSS 伪类匹配文档树的根元素。
对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。所以我们把自定义属性写在:root{}里面，html 标签里面的元素会继承的。

Copy
html

<body>
<section id="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</section>
</body>
Copy
css

#container {
width: 400px;
height: 150px;
background-color: #ffeead;
border: 1px solid #666;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#container > div {
width: 70px;
height: 50px;
}
#container div:nth-child(2n) {
background-color: lightgreen;
}
#container div:nth-child(2n + 1) {
background-color: lightpink;
}

声明变量#
Copy
css

:root {
--green: lightgreen;
--lightpink: lightpink;
}

#container div:nth-child(2n) {
background-color: var(--green);
}

#container div:nth-child(2n + 1) {
background-color: var(--lightpink);
}

background-color 的值用 var()代替实现相同的效果

CSS 层级变量#
局部变量会在作用范围内覆盖全局变量。

Copy
css

:root {
--green: lightgreen;
--lightpink: lightpink;
}

#container div:nth-child(2n) {
background-color: var(--green);
}
#container div:nth-child(2n + 1) {
background-color: var(--lightpink);
}

.item1 {
--green: black;
background-color: var(--green) !important; /选择器权重 100+10>10 所以加了!important/
}

使用多个变量#
Copy
css

:root{
--word1:"are";
--word2:"you";
--word3:"ok";
}

.item2::before {
content: var(--word1) " " var(--word2) " " var(--word3);
}

完~~

转载于:https://blog.51cto.com/14236847/2363868

CSS-非常有用的css变量相关推荐

[css] 你有用过CSS预处理器吗？喜欢用哪个？原理是什么？
[css] 你有用过CSS预处理器吗?喜欢用哪个?原理是什么? 它能让你的CSS具备更加简洁.适应性更强.可读性更强.层级关系更加明显.更易于代码的维护等诸多好处. CSS预处理器种类繁多,目前Sas ...
Web 开发中 20 个很有用的 CSS 库
在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做 ...
CSS入门-五个简单,但有用的CSS属性
今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于CSS3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-heigh ...
你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知 ...
[css] 你有用过哪些css框架？说说它们的特点
[css] 你有用过哪些css框架?说说它们的特点 bootstrap 不够全,所以后来基本都是借鉴思路取长补短自己写的 css 类库或原子类库. animate.css 用起来很爽,主要用于滚动和小 ...
[css] 你有用过table布局吗？说说你的感受
[css] 你有用过table布局吗?说说你的感受用来做列表排版还是很不错的,但是要想用的好,还是要对table有比较多的了解. 比如实现表头固定,表内容超出滚动的效果等个人简介我是歌谣,欢迎和 ...
[css] 你有用过IE css的expression表达式吗？说说你对它的理解和它有什么作用呢？
[css] 你有用过IE css的expression表达式吗?说说你对它的理解和它有什么作用呢? 主要用来解决IE 低版本样式自适应的问题. 比如:height:expression(this.of ...
[css] 你有用过弹性布局吗？说说你对它的理解
[css] 你有用过弹性布局吗?说说你对它的理解按我的经验在样式规律上大致分下类吧,等宽弹性布局单元素弹性布局多元素定比弹性布局等隙布局用 flex 或 grid 能非常轻松的完成以上效果,而 cs ...
[css] 你有用过clip-path吗？说说你对它的理解和它都有哪些运用场景？
[css] 你有用过clip-path吗?说说你对它的理解和它都有哪些运用场景? clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域它的值可以为以下几种: 用表示剪切元素的路径: ...
[css] 你有用过vw布局吗？和使用rem有什么区别？
[css] 你有用过vw布局吗?和使用rem有什么区别? vw/vh 是屏幕视图的百分比, rem 是根据 html的font-size 来设置的相对值. 个人简介我是歌谣,欢迎和大家一起交流前后端 ...

CSS-非常有用的css变量

CSS-非常有用的css变量相关推荐

最新文章

热门文章