css预处理器
一、什么是css预处理器?
CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件
二、分类(重点)
Sass(SCSS)、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS
三、优点
- 提供CSS层缺失的样式层复用机制
- 减少冗余代码
- 提高样式代码的可维护性
四、实现原理
取到 DSL 源代码 的 分析树
将含有 动态生成 相关节点的 分析树 转换为 静态分析树
将 静态分析树 转换为 CSS 的 静态分析树
将 CSS 的 静态分析树 转换为 CSS 代码
五、优缺点
优点:语言级逻辑处理,动态特性,改善项目结构
缺点:采用特殊语法,框架耦合度高,复杂度高
六、具体介绍
(一)sass(重点)
完整内容参考这里
1.sass的安装
- sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。安装完成后需测试安装有没有成功,运行CMD输入以下命令:
ruby -v
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
- 第二步
gem install sass
- 安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:
sass -v
Sass 3.x.x (Selective Steve)
2.编译sass
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets
3.基本用法
变量
SASS允许使用变量,所有变量以$开头。
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
嵌套
选择器嵌套
//sass写法
#main p{
color:#eee;
.redbox{
color:#000000
}
}
//编译后
#main p{
color:#eee;
}
#main p .redbox{
color:#000000
}
属性嵌套
//SASS语法,注意在外边加冒号
.funy{
font:{
family:fantasy;
size:30em;
weight:bold;
}
}
//编译后
.funy{
font-family:fantasy;
font-size:30em;
font-weight:bold;
}
伪类嵌套--------引用父类
//SASS写法
a{
background:black;
&:hover{background:red;}
}
//编译后
a{
background:black;
}
a:hover{background:red;}
混合器(混入)
Mixins允许创建一组可以在整个样式表中重复使用的样式,而不需要重新创建非语义类。
//使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
//使用@include命令,调用这个mixin。
div {
@include left;
}
给混合器传参
可以通过在@include混合器时给混合器传参,来定制混合器生成的精确样式。这种方式跟
JavaScript的function很像:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
//&调用父元素
&:hover { color: $hover; }
&:visited { color: $visited; }
}
//在这里进行调用
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
为什么要使用SASS?
它是预处理语言,它为CSS提供缩进语法(它自己的语法)。
它允许更有效地编写代码和易于维护。
它是包含CSS的所有功能的CSS的超集,是一个开源的预处理器,以 Ruby 编码。
它提供了比平面CSS好的结构格式的文档样式。
它使用可重复使用的方法,逻辑语句和一些内置函数,如颜色操作,数学和参数列表。
列出SASS的一些功能?
它是更稳定,强大,与CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被称为CSS的语法糖,这意味着它使用户更容易阅读或表达的东西更清楚。
它使用自己的语法并编译为可读的CSS。
你可以在更少的时间内轻松地编写CSS代码。
它是一个开源的预处理器,被解释为CSS。
SASS的优点是什么?
它允许在编程结构中编写干净的CSS。
它有助于编写CSS更快。
它是CSS的超集,帮助设计师和开发人员更有效率和快速地工作。
由于Sass兼容所有版本的CSS,我们可以使用任何可用的CSS库。
可以使用嵌套语法和有用的函数,如颜色操作,数学和其他值。
SASS的缺点是什么?
开发人员需要时间了解此预处理器中存在的新功能。
如果更多的人在同一个网站上工作,那么将使用相同的预处理器。 有些人使用Sass,有些人使用CSS直接编辑文件。 因此,它将变得难以与现场工作。
有机会失去浏览器的内置元素检查器的好处。
(二)less (了解)
less的变量处理方式为懒加载,所有LESS变量的计算,都是以这个变量最后一次被定义的值为准
less的缺点
很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。
(三)stylus
综上所述,我们对Sass、LESS和Stylus做一个简单的对比总结:
1.三者都是开源项目;
2.Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持;Stylus早期服务器Node JS项目,在该社区得到一定支持者;LESS出现于2009年,支持者远超于Ruby和Node JS社区;
3.Sass和LESS语法较为严谨、严密,而Stylus语法相对散漫,其中LESS学习起来更快一些,因为他更像CSS的标准;
4.Sass和LESS相互影响较大,其中Sass受LESS影响,已经进化到了全面兼容CSS的SCSS;
5.Sass和LESS都有第三方工具提供转译,特别是Sass和Compass是绝配;
6.Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性,各自特性实现功能基本相似,只是使用规则上有所不同;
7.Sass和Stylus具有类似于语言处理的能力,比如说条件语句、循环语句等,而LESS需要通过When等关键词模拟这些功能,在这一方面略逊一层;
CSS后处理器 (了解)
CSS 后处理器 是对 CSS 进行处理,并最终生成 CSS 的 预处理器,它属于广义上的 CSS 预处理器。
我们很久以前就在用 CSS 后处理器 了,最典型的例子是 CSS 压缩工具(如 clean-css),只不过以前没单独拿出来说过。还有最近比较火的 Autoprefixer,以 Can I Use 上的 浏览器支持数据 为基础,自动处理兼容性问题。
//以 Autoprefixer 为例:
.container {
display: flex;
}
.item {
flex: 1;
}
//将以上 标准 CSS,编译为处理了兼容性的 生产环境 CSS:
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
实现原理
将 源代码 做为 CSS 解析,获得 分析树
对 CSS 的 分析树 进行 后处理
将 CSS 的 分析树 转换为 CSS 代码
优缺点
优点:使用 CSS 语法,容易进行模块化,贴近 CSS 的未来标准
缺点:逻辑处理能力有限
CSS 后处理器框架
1.Rework
Rework 是一个 高效、简单、易扩展 并且 模块化 的 CSS预处理器。
它在 2012 年 9 月才发布了第一个版本,是 Stylus 的作者 TJ Holowaychuk 大神挖的新坑。
实际上,他采用的是 CSS 后处理器 的模型,在其之上有一个模仿 Stylus 风格缩进嵌套的工具 styl,其 CSS 预处理器 部分功能是在 Rework 开始工作之前通过 css-whitespace 实现的。
有一些基于 Rework 的样式库,参考了 CSS 标准草案 或 CSS 标准提案,相当于支持了 CSS 的未来标准,如 rework-vars、rework-font-variant、rework-calc、rework-color-function 等。
是不是听起来有点晕?这正说明它的模块化做的非常好,你可以按照实际需要,组合 CSS 框架,比如 Myth。
概括一下 Rework 的特点:
JavaScript 中直接操作 CSS 解析对象,扩展方便
可以 自由组合模块,按需定制 CSS 工具库
CSS 后处理器 的模型决定它的模块倾向 CSS 未来标准
除 服务器 端外,也支持在 浏览器 环境运行
Rework 还很年轻,还需要更多的时间积累。
2.PostCSS
PostCSS 是一个 CSS 后处理器 框架,允许你通过 JavaScript 对 CSS 进行修改。
它的第一个版本发布于 2013 年 11 月,是从 Autoprefixer 项目中抽象出的框架。
PostCSS 有以下特点:
它和 Rework 非常相似,但提供了 更高级的 API,更易扩展
它可以在现有 Source Map 的基础上生成新的 Source Map
在 原有 CSS 格式 的保留方面做的更好,便于开发 编辑器插件
比 Rework 更年轻,还只有 Autoprefixer 一个成功案例
其实 Autoprefixer 最初是基于 Rework 做的,但后来作者有更多需求(上面的列表),就造了 PostCSS 这个轮子。