css预处理器
CSS 预编译工具有stylus,sass,less 为什么会出现CSS预编译器这个东西呢?
这就要谈到CSS的不足了:没有变量(新的规范已经支持了),不支持嵌套,编程可以力较弱,代码复使用性差。这些不足导致写出来的CSS维护性极差,同时包含大量重复性的代码;为了弥补这些不足之处,CSS预编译器应运而生。而谈到CSS预编译器,就离不开这三剑客Sass、Less、Stylus。历史上,最先登场的是Sass,由于出现最早,所以也是最完善的,有各种丰富的功可以;Less的出现伴随着Bootstrap的流行,因而也取得大量使用户;最后是Stylus,由TJ大神开发(敬大神),因为其简洁的语法,更像是一门编程语言,写起来非常Cool。
less 和scss有什么区别呢?
不同点:
1、变量的声明方式不同:
less:@
scss $
2、作用域不同,less存在变量提升,scss没有变量提升
3、插值使用方式不同: less @{key} scss ${$key}
4、scss可以使用if{ } else ,for循环等,less是不支持的
5、引入外部的css文件方式不同
scss 引入的文件名必须以_(下划线)开头。
6、LESS和SCSS都可以使用&符号表示父选择器,但是SCSS的&符号只能出现在一个组合选择器的开始位置,LESS则没有这个限制
7、
sass的安装环境需要Ruby环境,是在服务端处理的;
less需要引入less.js来处理代码输出到css到浏览器,也可以在开发环节使用less,然后编译成css文件直接使用
相同点:
- LESS和SCSS都是css的预处理器,可以拥有变量,运算,继承,嵌套的功能,使用两者可以使代码更加的便于阅读和维护。
- 都可以通过自带的插件,转成相对应的css文件。
- 都可以参数混入,可以传递参数的class,就像函数一样
- 嵌套的规则相同,都是class嵌套class