前端工程师基础知识-CSS预处理器

Posted 2021-04-09 我爱极客

前端工程师的主要工作氛围三部分，如果整个工作内容是一个人的话，这三部分就是人之骨：html，人的皮囊：css,人之魂：javascript;今天我们就来聊聊人之皮囊相关的CSS预处理器。

CSS部分是页面或项目程序的皮囊，有了它的装饰，才让一个项目或程序变得赏心悦目，才变得美丽动人，不过CSS的缺点就是高冗余，没有JS那样可以模块的结构，不容易维护，为了解决这种不便，就诞生了CSS预处理器，它的基本思想就是将样式编写跟JS书写程序那样，可以模块化编写，高重复使用，并便于维护和可读性更高，今天我们就聊聊CSS预处理的人齐排行前三甲：Sass、Less、Stylus。

第三名：Stylus 文件扩展名.styl

语法：比较自由，规则的限制也比较少，我也总结了一下它的规则，大致分为两种：带花括号，和不带花括号：

带花括号分为：1.冒号和分号 例：

.classname{ 

            color:blue;

} 

2.无冒号和分号，例：.(属性的区分需要换行）

classname{

        color blue

        height 500px

}

不带花括号：1.带冒号和分号 例：

.classname

        color:green;

        height:500px;

2.带分号，没有冒号

.classname

        color green;

        height 500px;

3.没有冒号，分号

.classname

        color green 

        height 500px

我个人觉得正式这种自由度高，导致文件本该有的规范的丧失，导致的可读和可维护的度降低；所以要写出简洁的代码，对使用团队的开发素养要求也更高，更需要有良好的开发规范或约定使得代码更利于维护和扩展。

第二名：Sass  文件扩展名：.scss/.sass

语法：

1..scss文件语法：CSS3基础上的扩展，也支持大多数 CSS hacks 写法

2. .sass文件语法：缩进式语法 例 

.classname  

     height:100px 

    color:green

Sass 在三者之中历史最久，也吸收了其他两者的一些优点。从功能上来说大而全，语义明晰但是代码很容易显得累赘，不过它 有一个「事实标准」库——Compass，于是对于很多开发者而言省去了选择类库的烦恼，对于提升开发效率也有不小的帮助。

第一名：less 文件扩展名：.less(我常用的）

语法：使用CSS语法，你可以在less和css之间平滑过渡

Less 从语言特性的设计到功能的健壮程度和另外两者相比都有一些缺陷，相比另外两者，基于 Less 开发类库会复杂得多，实现的代码会比较脏，能实现的功能也会受到 DSL 的制约。

下面总结一下这三种预处理的优缺点（仅供参考）

1) SASS：最早、最成熟的CSS预处理器，拥有Ruby社区的支持和compass这一最强大的CSS框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。SASS使用.sass扩展名。

2) LESS：受SASS的影响较大，但又使用CSS的语法，更容易上手，在Ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，优点是简单和兼容CSS。LESS影响了SASS演变到SCSS，著名的Twitter Bootstrap就是采用LESS做底层语言的。LESS使用.less扩展名。

3) Stylus：来自Node.js社区，主要用来给Node项目进行CSS预处理，在Node.js社区内有一定支持者，但在广泛意义上人气还完全不如SASS和LESS。Stylus使用.styl扩展名。Stylus功能上更为强壮，和JavaScript联系更加紧密。