CSS预处理器~

其实,是因为新来一个小朋友,要问我一些问题,我才打算去好好整理下。我觉得我看过很多遍,但是很多遍都没走心的样子。罪过~

CSS原生,写起来就比较麻烦了,很长,很长,重复的东西也很多。然后就搞了个CSS预处理器,引入一些变量、程序,然后写成树状层级,让代码很清晰,易于维护。

CSS预处理常见有几种:LESS、SASS(SCSS)、基于SASS的Compass、Blueprint、HTML5  Boilerplate、基于LESS的Twitter Bootstrap等。

使用中的一些特点:1)使用常规CSS样式,以可读性为准;

2)设置变量,不同预处理器有不同的规则,比如SASS用$.标识变量,变量,比如同一个颜色值就可以设置一个变量,这样只需要改一下变量值即可;

3)可以嵌套:这样就不用写很多的parent了。树状层级结构,稳稳的写好,增强可读性;

4)继承:如SASS为@extend。可以把别人的样式加载为自己的;

5)Mixins:混入。类似定义了一块CSS,包含多个CSS样式, @mixins 定义;@include 引入;

6)@import:引入一个scss文件/css,然后一起编译。。成一个文件~

然后就像搭积木的使用这些好玩的东西吧~

不过如果作为全栈工程师,你该怎么处理呢? 使用啥呢?

有人建议这么使:SASS+Compass+Bootstrap+bootstrap-sass。编程能力+强大的底层库+丰富的UI库。。

 外引一个很好的介绍:SASS和Compass

原文地址:https://www.cnblogs.com/hanyuxinting/p/4425561.html