Sass、Less 、Stylus 的三国演义(1)

原创 uptown 教程 Css 358阅读 2018-07-31 18:05:24 举报

        古往今来,生产力的发展,推动着人类社会的进步。人类社会的进步,又主导了劳动工具的革新。
        Css亦然,发展至今,Css3 已经普及,甚至Css 4 的规范,都已经在制定中。功能越来越强大,视觉越来越酷炫,但就开发者而言,开发维护的体验,却并未有明显提升。
        这个时候,css 的各种劳动工具应运而生,Sass、Less、Stylus,像写 JQuery 一样 写样式,这大大的提升了开发速度,代码优雅干净,结构层次分明,维护起来也是 so easy,这对开发者而言,简直像荒漠里,遇到的一股清流。

注释

文章样式都是基于 如下 Vue.js 页面演示

1、引用外部样式表

2、选择器

3、变量

变量前面的标识符:

Sass 用的是跟 S 类似的美元符 $,

Less 用的 @,

Stylus 可以不用或者 $

4、继承

Sass 和 Stylus 都是:  @extend .class ( Sass:又模仿我的脸! );

Less 这回走极简风,直接调用:.class

5.方法

Sass 是比较墨迹的  @mixin + @include,且括号内的参数,需加上美元符 $;

Less 参数同样需要加上 变量标识符 @;

需要注意,当设置默认参数,Sass、Less 是 冒号:$width:3px || @width:3px,Stylus 是 等号:width=3px

未完待续。。。

评论 ( 1 )
最新评论