前端自动化系列(二)之less、scss、sass、stylus css预处理器

相信搞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了；
就不需要我再废话了吧；

收工；买个回城卷轴；回我的被窝了；
白俊遥博客

本文为白俊遥原创文章,转载无需和我联系,但请注明来自白俊遥博客https://baijunyao.com 欢迎捐赠赞赏加入组织创建QQ群及捐赠渠道

白俊遥博客
请先登录后发表评论
  • latest comments
  • 总共15条评论
白俊遥博客

清风 ：活到老，学到老

2017-11-02 11:08:54 回复

白俊遥博客

爱便流通于世 ：长知识

2017-06-21 13:05:19 回复

白俊遥博客

六月的雨 ：我想问一下你这样有没有三级分销的开源源码 

2017-06-14 19:05:42 回复

白俊遥博客

{"name":"路人黄"} ：白俊遥博客

2016-12-16 10:21:16 回复

白俊遥博客

Antion Zhou ：可以使用您的开源BLOG，创建我自己的博客网站吗？

2016-11-11 13:52:58 回复

白俊遥博客 白俊遥博客

云淡风晴 ：可以的；随意使用；

2016-11-11 22:35:52 回复

白俊遥博客

金松 ：白俊遥博客又学到前端知识

2016-11-03 23:20:37 回复

白俊遥博客

_Jun ：什么时候出个TP5的啊

2016-11-03 16:18:24 回复

白俊遥博客

飞啊飞啊灰啊灰 ：白俊遥博客

2016-11-02 22:30:05 回复

白俊遥博客

江湖郎中 ：您好，您的开源 博客 有没有数据库文件？需要自己创建？

2016-11-01 17:28:46 回复

白俊遥博客

江湖郎中 ：运行了 知道是怎么回事了  厉害！

2016-11-01 17:37:28 回复

白俊遥博客

生如夏花 ：你的后台登录的时候验证码图片会显示正常么？

2016-11-01 19:22:16 回复

白俊遥博客

雷小天 ：不会吧

2016-11-03 13:22:51 回复

白俊遥博客

生如夏花 ：你好，用你的框架搭建的博客，后台登录的时候验证码图片不显示，是什么问题啊？

2016-11-01 09:20:03 回复

白俊遥博客 白俊遥博客

云淡风晴 ：检查GD库是否正常开启！

2016-11-01 23:43:02 回复