普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。
CSS 预处理器概述:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。
总结来讲就是用编程的方法来写CSS样式,而不是手工一行行码,相当于从手工业时代进化到工业时代。
三种CSS 预处理器(框架)简介:
A、SASS2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。
B、LESS2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。
C、Stylus,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。
Stylus主要优点:
1. 简短直观,缩进让CSS的层次非常直观。
2. At 属性引用可以减少维护量。
3. 函数和Mixin,重用的利器。
CSS 预处理器优缺点:
A、可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。
B、部分PostCSS插件配合预处理器将功能添加到你的工作流中,让你工作变得更加轻松。如果只使用一个预处理器,而不使用这些插件,工作流至少会变得更加困难。
C、PostCSS插件和喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。
D、在常规的预处理器通过使用混合宏或函数特性像程序一样处理代码,达到类似的结果。不过不同的是CSS代码,而其他一切通过插件去处理,而这个过程中不需要调用函数,也没有混合宏等等。
使用技巧:Sass看起来在提供的特性上占有优势,但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS,而不需要像Sass那样需要将CSS文件转换成Sass格式。
缺点:
简单来说CSS预处理器语言较CSS玩法变得更高级了,但同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。
优点:
用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
stylus跟sass和less一样都是css预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,官网的介绍为:富于表现力、动态的、健壮的 CSS因为stylus出现的比较晚,因此它的语法比较新。
Stylus默认使用 .styl 的作为文件扩展名,支持多样性的CSS语法。
stylus支持三种注释:
单行注释在编译之后会被删除,多行注释会被保留,多行缓冲注释相当于告诉Stylus压缩的时候这段无视直接输出。
编译之后的css
在stylus中,认为对于元素样式的设置 , {} : 是无意义的,因此在stylus中可以不用书写它们。同样因为没有来这些符号,所有空白符,换行,空格以及tab都很重要,写的时候要慎重。
stylus是用js写的,因此很多语法跟js很像,比如js定义变量:
stylus中定义变量:
Stylus有另外一个很酷的独特功能,不需要分配值给变量就可以定义引用属性。如下:
这样就可以简单的通过前置@字符在属性名前来访问该属性名对应的值。
另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中,我们默认指定z-index值为1,但是,只有在z-index之前未指定的时候才这样:
属性会“向上冒泡”查找堆栈直到被发现,或者返回null(如果属性搞不定)。下面这个例子,@color最后是blue.
Stylus支持通过使用{}字符包围表达式来插入值,其会变成标识符的一部分。例如,-webkit-{'border' + '-radius'}等同于-webkit-border-radius 比如:
编译之后
编译过后:
stylus中支持混合,语法跟js中定义函数很像,它的作用是用来复制样式或者兼容浏览器
js中定义函数:
在stylus中定义混合语法:
1.混合名称() ,参数集合中可以传递参数,多个参数使用逗号隔开
2.混合名称 参数 ,多个参数使用逗号隔开
3.混合名称 参数 ,多个参数使用空格隔开
1.属性混合
封装一个属性,用来兼容各个浏览器
特点:通常以属性名称定义混合,来覆盖原有的属性,兼容浏览器
2.样式混合
封装的是多个属性,用来复用样式
编译之后
注意:
1.混合的参数集合绝对不能省略
2.混合名称与参数集合之间绝对不能有空格
3.如果参数中出现了空格,我们要使用第二种方式
Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致;却可以返回值。
很简单的例子,两数值相加的方法:
编译之后
sylus还可以引入外部的stylus文件
stylus会根据@keyframes自动创建兼容浏览器的样式,但是内容样式如果出现了css3则不会处理,需要使用混合书写的方式进行处理
举个栗子:
编译之后:
编译之后:
编译之后:
不管什么原因,如果遇到Stylus搞不定的特殊需求,你可以使用@css使其作为CSS字面量解决
编译为:
Stylus可以字符转码。这可以让字符变成标识符,或是渲染成字面量。注意Stylus中/当作为属性使用的时候需要用括号括起来:
编译为:
需要在vue.config.js中配置
然后在main.js中引入公共样式文件,这样就不需要在组件里面再引入一次公共样式啦
官网: http://stylus-lang.com/
参考中文文档: https://www.zhangxinxu.com/jq/stylus/