相信搞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