CSS即将具备的6种处理器特性

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

今天看到@Dennis Gaebel分享的一篇博文。觉得很有意思。同时感觉老外分享出来的东西就是不一样,尽管自己也专门整整CSS,但从新特性的发掘和敏锐性就差十万八千里。

不吐槽了,还是回到正题来吧。

众所周知,CSS是不具备类似其他程序语言一样的特性,没有逻辑性而言。他就是一门描述性语言(暂时把她称作语言吧)。因此才会有各式各样的CSS处理器出来,比如较为流行的Sass,LESS和Stylus。当然还有近年最强大的PostCSS,在项目中使用PostCSS能将你带入到一个全新的CSS世界,至于原因是什么,暂且不在这里阐述。

使用过CSS处理器的同学应该知道,在CSS处理器中最常见的几个特性是变量、混合宏、扩展、嵌套、运算以及一些简单的逻辑运算。经过多年的沉淀,这些特性开始尝试在CSS中使用。比如下面我们将要说的几个特性,就是CSS自身已具备或将要具备的类似于CSS处理器的特性。

变量

变量是CSS处理器最基本的特性之一,它能类似于其他的程序语言一样。通过变量让我们的代码变得更好维护和管理。比如说给项目定制多道主题之时,变量特性就显得很强。

对于CSS自身而言,他承接CSS处理器众多特性之一变量。只是使用的方式略有差别,咱们先来看Sass中的变量声明方式和调用方式:

$spacing-unit: 20px;

main {
    margin: $spacing-unit;
    padding: $spacing-unit;
}

在Sass中通过$声明一个变量。在CSS中是这样来声明变量的:

:root {
    --primary-color: skyblue;
}

nav.primary {
    background: var(--primary-color);
}

从上面的代码中可以看出。在CSS中是通过前缀--来声明一个变量,如果将变量放置在:root中,代表其声明的是一个全局变量,如果将其放置在某个CSS代码块中,表示声明的局部变量。使用的时候,借助var()函数来调用已声明的变量。在var()函数中可以接受两个参数:

div {
    color: var(--my-var, red);
}

第一个参数代表变量名,第二个参数指变量的默认值。也就是说,如果未显式的声明--my-var这个变量,那么通过var()临时声明了这个变量,而且这个变量的值是red

到整理这篇文章之时,CSS变量得到了众多主流浏览器的支持,而且使用的场景也特别的多,比如在动画中。这里只是简单的介绍了一下CSS变量的简单使用,有关于这方面的详细介绍,

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css4/6-preprocessor-features-coming-to-native-CSS.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部