前面的话
现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法
变量
一般地，我们在进行web开发时，会有一套变量定义规范，以sass为例，如下所示
// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333
//字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px而CSS变量的语法如下
【声明变量】
变量必须以–开头。例如–example-variable: 20px，意思是将20px赋值给–example-varibale变量
可以将声明变量的语句置于任何元素内，如果要设置全局变量，则可以设置为:root、body或html
:root{--bgColor:#000;}变量声明就像普通的样式声明语句一样，也可以使用内联样式
<body style="--bgColor:#000">【使用变量】
使用var()函数使用变量，并且可以被使用在任意的地方。例如：var(–example-variable)会返回–example-variable所对应的值
<body style="--bgColor:#000;">
<div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>
</body>var()函数还有一个可选参数，用来设置默认值，当变量无法取得值时，则使用默认值
<div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div> [注意]关于CSS变量的详细用法移步至此
@apply
介绍@apply之前，先介绍一下sass中的混合宏@mixin，指可以重用的代码块
比如，常见的文字溢出隐藏重用
@mixin overflow-ellipsis{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
};
div {
@include overflow-ellipsis;
} 而应用规则集@apply也是实现类似的功能。与var()相比，@apply是引用样式的集合，而var()是引用一个单独的样式值
:root{
--overflow-ellipsis:{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
};
}
.title{
width:200px;
@apply --overflow-ellipsis; 新闻热点
疑难解答
