前端自动化less、scss、sass、stylus预处理器

相信搞web开发的童鞋们；

多多少少都能写点css；

毕竟这玩意压根也称不上编程；

都是些固定写法死记硬背用就成了；

写css基本上都是体力活；

当然；今个不是要来讲css的；

而是要带领还在刀耕火种的使用css的童鞋们；

进入css预处理器时代；

先来段css代码；

为了直观这里直接以元素名命名class了；

.body {

background: #000;

color: #fff;

}

.body .p {

width: 100px;

height: 100px;

}

.body .p .a {

color: #eee;

}

因为css优先级的问题；

童鞋们相比对于这种一层一层的写法也是非常纠结；

每次写一个子级的样式；都要复制父级的一串选择器；

好了；第一上场的主角叫less；

这是一个只需要1分钟即可学会；

然后就能为我们的工作节省大量时间的东西；

还记得上篇文章我们安装了一个叫npm的包管理工具么；

后面我们都用cnpm代替了；

先来安装less；

cnpm install -g less

lessc -v

注意；这里是lessc；不是less；

好了；装完less；接着就是怎么用了；

找个空旷的地方；新建一个test.less文件；

把下面这段代码粘贴进去；

.body{

background: #000;

color: #fff;

.p{

width: 100px;

height: 100px;

.a{

color: #eee;

}

}

}

然后 cd 或者 git bash 到这；

运行下面编译less的命令；会生成一个test.css文件；

内容就和文章刚开始写那段css一样；

lessc test.less test.css

好了到这；我觉得就没必要讲了；

因为童鞋们扫了一眼后；就已经学会了less了；

就是简单的写成层级嵌套的的形式；

好处也很明显；一个选择器写一次就行了；

再也不用一层一层的复制父级class名了；

而且层级关系非常清晰；

还有两个重要的用法；这里给段示例；就肯定又懂了；

@base: #eee;

.a{

color: @base;

&:hover{

color: @base;

}

}

上面这段代码将生成如下css；

.a {

color: #eee;

}

.a:hover {

color: #eee;

}

那个@就是定义变量的意思；接着就是使用变量；

&: 后面跟的是伪元素类推还有:before和:after等；

别把这段复制进test.less啊；下面还要用；

更详细的就直接传送到官网吧：less官网

为什么不给个中文站？因为中文站翻译的跟没翻译差不多；

第二、第三个上场的主角叫scss和sass；

之所以两个一起上场；是因为他俩是父子关系；

先来安装个sass的包；

cnpm install -g npm-sass

把之前的那个test.less复制一份改名为 test2.scss

然后运行：

npm-sass test2.scss > test2.css

好了；scss你也学会了；完全跟less一样就行；

但是如果跟less一样；那就没必要讲了；

区别还是有的；而且更有一堆高级的用法；

首先可以 import 一个scss文件；

不同于css的import的是；scss用import最后会合并成一个文件；

然后；可以使用 $ 定义变量；把less中的@换成$就哦了；

比less强大的是；变量可以定义成数组；

更强大的是；连if、for、each、等判断和循环都可以；

以及 继承、函数、运算等等；

更详细的请点传送门：w3cplus中文教程

那sass和scss什么区别呢？

其实使用上没区别；scss 是 sass 3 引入新的语法；

但是sass继承了Ruby的语法；

就是不要花括号{ }和分号； ；靠缩进表示层级关系；后缀为.sass；

把之前的那个test.less复制一份改名为 test3.sass；

去掉花括号{ }和分号；；

.body

background: #000

color: #fff

.p

width: 100px

height: 100px

.a

color: #eee

然后运行

npm-sass test3.sass > test3.css

最后一个上场的叫Stylus；

和前面几位主角打过交道后；

到了stylus；我想说的就是；

把前面的那些代码去掉花括号、冒号、分号；

然后ok；stylus你也学会了；

光说不行；咱得走一遍溜溜；

cnpm install -g stylus

把之前的那个test.less复制一份改名为 test4.styl；

删掉花括号{ }、分号；、冒号：；

.body

background #000

color #fff

.p

width 100px

height 100px

.a

color #eee

然后运行

stylus test4.styl test4.css

更详细的文档传送门：stylus中文文档

ok；到这里；css的三种预处理器就讲解完了；

那选择恐惧症的童鞋们就该纠结了；

到底用那种好呢？其实看个人习惯；没有绝对标准；

不过；这里还是给出我的个人意见仅供参考；

stylus真是相当有创意；简洁干净；

相当满足懒人的需求；可以少打好多符号；

所以...

别急；这还有个但是；

但是；有花括号、分号、冒号；层级感更明显；更利于维护；

所以首先pass掉stylus；

sass明显比less更强大；功能更多；而学习成本并不高；

所以；接着pass掉less；

最后；前端框架界的楷模bootstrap4已经转向scss了；

就不需要我再废话了吧；

收工；买个回城卷轴；回我的被窝了；

-------------------------------------------------------------------------------------------------------

程序员交流QQ群：374604838

云服务器提供商：http://www.zunse.net

小编微信：woshiyixun