前端自动化系列(二)之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了;

就不需要我再废话了吧;


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

白俊遥博客


白俊遥博客
请先登陆后发表评论
  • 最新评论
  • 总共6条评论
白俊遥博客

Antion Zhou:可以使用您的开源BLOG,创建我自己的博客网站吗?

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

白俊遥博客
  • 云淡风晴 回复 Antion Zhou:可以的;随意使用;
  • 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 回复