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

众所周知，CSS是不具备类似其他程序语言一样的特性，没有逻辑性而言。他就是一门描述性语言。

因此才会有各式各样的CSS处理器出来，比如较为流行的Sass，LESS和Stylus。当然还有近年最强大的PostCSS，在项目中使用PostCSS能将你带入到一个全新的CSS世界，至于原因是什么，暂不阐述。

使用过CSS处理器的同学应该知道，在CSS处理器中最常见的几个特性是变量、混合宏、扩展、嵌套、运算以及一些简单的逻辑运算。

经过多年的沉淀，这些特性开始尝试在CSS中使用。比如下面我们将要说的几个特性，就是CSS自身已具备或将要具备的类似于CSS处理器的特性。

变量

$size20:20px;
.main{
    margin-top:$size20;
    padding:$aize20;
}

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

:root{
    --mary-color:blue;
}
nav.mary{
    background:var(--mary-color);
}

从上面的代码中可以看出。

在CSS中是通过前缀–来声明一个变量，如果将变量放置在:root中，代表其声明的是一个全局变量，如果将其放置在某个CSS代码块中，表示声明的局部变量。使用的时候，借助var()函数来调用已声明的变量。

在var()函数中可以接受两个参数：

div{
color:var(--mar-var，red);
}

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

CSS变量得到了众多主流浏览器的支持，而且使用的场景也特别的多，比如在动画中。
这里只是简单的介绍了一下CSS变量的简单使用，有关于这方面的详细介绍，大家可以百度一下。

混合宏

在CSS处理器中另一个特性就是混合宏。混合宏最强的特性就是可以方便你引用一个代码块。同样的我们先来看Sass中的混合宏。

在Sass中通过@mixin关键词来声明一个混合宏，然后通过@include来调用已声明的混合宏：

@mixin font-size($size,$base){
    font-size:$size;
    font-size：（$size/$base）* 1em;
}
body{
    @include font-size(12,14);
}

编译出来就是：

body{
    font-size:12px;
    font-size:0.857rem;
}

上面创建了一个font-size的混合宏，并且给这个混合宏传递了两个参数$size和$base。

而这个混合宏的功能就是计算font-size的值。让不支持rem的浏览器采用px作为单位值，对于支持rem的浏览器采用rem的单位值。

CSS的混合宏声明有点类似于变量的声明，只不过在里他是一个代码块，然后使用@apply规则（类似于Sass中的@include关键词）调用已声明好的混合宏。

运算

在CSS处理器中可以进行简单的一些数学运算，比如说加减乘除之类。

那么在CSS中其实也有类似的计算功能。

此时，我想大家应该马上想到了calc()函数。如此说来，这个也算是CSS带有的CSS处理器特性之一的话，那它比CSS变量特性还要更早。

我想大家应该也在项目中或多或少的使用过：

nav{
margin:calc(1rem-2px) calc(1rem-1px);
}

这里咱们看不出计算出来的值是多少，其实浏览器会自动根据表达式计算出其值。特别是CSS具有变量的特性之后，calc()使用的越来越频繁。

colorful{
    --translation:10;
    transform:
    translateX(calc(var(--translation)*1vw))
    translateY(calc(var(--translation)*1vh));
    fliter：hue-rotate(calc(var(--translation)*4.5deg));

    will-change:transform,filter;
    transition:transform 500ms ease-in-out ,filter 500ms linter;
}

嵌套

我想大家使用CSS处理器嵌套的时候，应该感觉到了非常的爽。当然嵌套要是没用好，反而得到不佳的效果。我看到过有同学无限层次的嵌套，结果编译出来的CSS简值无法让人接受。

同样的，先来看Sass的嵌套：

ul{
    margin:10px auto;
    li{
        padding: 0 10px;
    }
    a{
        color:pink;
    }
}

因为使用嵌套是有风险的，建议任何嵌套不要超过三级。当然，在Sass中可以通过@at-root跳出嵌套，或者通过自定义的函数也能实现跳出嵌套。

在此也希望在CSS的嵌套中也能具备类似的特性，如果一来，为了维护更好的代码块，就算是嵌套层级深，也能跳出层级关系。

大家也希望能在CSS中具备类似的嵌套特性吧。@Tab Atkins提出过CSS原生的嵌套。CSS的嵌套其实将有可能类似于Sass这样的嵌套。只不过Sass需要编译，而CSS的嵌套不需要编译就能直接被浏览器识别渲染。

扩展

在Sass中可以使用@extend扩展已声明的任何类代码块或者通过%声明的占位符：

.qiaoba{
    margin:0 auto;
    padding:10px;
    font-size:16px;
}
.luo{
    @extend .qiaoba;
    border-color:red;
}
.nvdi{
    @extend .qiaoba;
    border-color:blue;
}
.qiwuhai{
    @extend .qiaoba;
    border-color:pink;
}

上面的代码编译出来是什么我想大家都知道了。不同状态继承了.qiaoba的基本样式，只不过在不同的状态重置了border-color。

同样的，到目前为止还没有任何浏览器支持类似Sass这样的扩展规则特性。但@Tab Atkins已提出相关的建议。或许有一天，CSS的扩展规则也类似于Sass中的扩展规则。

颜色函数

CSS处理器提供了很多个颜色函数。可能通过这些函数计算出颜色新值。在CSS中，也将具备这方面的特性。@Erik Jung写了一篇文章来介绍CSS Color Module Level 4特性。介绍color-mod()函数来计算颜色。另外@Ahmad Shadeed分享了如何使用rgba()模拟出color-mod()函数特性。

更为强大的是，@Tyler Gaw使用React写的ColorMe，演示了color-mod()函数如何基于一个颜色，在不同条件下的变化。

(哇~CSS将在也不无聊~~)

下面代码简单演示了color-mod()函数的使用方式：

nav{
background:color-mod(#fff hue(360) saturation(100%))
}

总结

从使用多年CSS处理器经验来说，CSS处理器的确帮助我解决了很多问题，也让自己编码效率得到提高。

如果能将CSS处理这些优秀的特性移植到CSS规范中来，而不需要工具来编译的话，我们会更喜欢。当然这些CSS处理器的发展给CSS规范提供新思想和方法。

最后我希望向大家呈现这些新特性，能激发你在自己的工作中使用它们。