身为切图界的一员,或者说在前端界打滚了一段日子的你,会慢慢地发现,现在的css编写已经不能满足自己的效率。如果有更强大的框架,让你的css更灵活和更容易复用和维护,那该多好啊。很明显,这个早已经不是什么新鲜事,sass和less就是这么2个很优秀的
样式预处理器
,能让你的效率快速提高。接下来就谈谈它们。
LESS声明变量和Sass声明变量差不多,区别就是变量名前面使用是的“@”字符:
SASS和LESS在嵌套语法上基本一样,简单快捷。
在LESS里面,
在LESS里面,
在LESS里面,
其实还有很多细节的东西,有空我再慢慢补充了。
1.样式预处理器的定义
样式预处理器,简单地来概括就是技术大牛通过一门新的语言,让css的编写具备各种变量和属性,你按照它的语法写好后,就能编译,生成相应的css文件。当然这些处理器可以让你的css更简洁,易懂,具备更强的可移植性和维护性。
前端界里面,譬如Sass、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等都是上面所说的样式预处理器。这里不一一介绍,我只说一下比较优秀的sass和less。
2.sass和less这对好基友
2.1 sass的前世今生
SASS在07到08年就出现了,是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
2.2 less的前世今生
度娘告诉我们,LESS是一种由Alexis Sellier设计的动态层叠样式表语言。
LESS是开源的,其第一个版本由
Ruby
写成,但在后续的版本当中,Ruby逐渐被替换为
JavaScript
。受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。
LESS与CSS较为接近,一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。
3.框架的对比
3.1 实现方式的不一样
LESS和Sass的主要不同就是他们的实现方式,LESS是基于JavaScript,是在客户端处理的。然而,Sass是基于Ruby的,是在服务器端处理的。
很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。但是LESS环境较Sass简单,这也使得不少的童鞋选择LESS。
3.2 语法上的共性
Sass和LESS都使用的是标准的CSS语法。Sass使用“.scss”扩展名,而LESS使用“.less”扩展名。
3.2.1 变量
Sass声明变量必须是“$”开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号(:)隔开。
- $a: 14px;
- $b: #000;
- $C: solid
- .btn{
- width: $a;
- border: 1px $C $b;
- }
LESS声明变量和Sass声明变量差不多,区别就是变量名前面使用是的“@”字符:
- @a: 14px;
- @b: #000;
- @C: solid
- .btn{
- width: @a;
- border: 1px @C @b;
- }
3.2.2 嵌套(Class中嵌套class,从而减少重复的代码)
- body {
- padding: 5px;
- .head{
- height: 10px;
- a {
- color: #000;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
SASS和LESS在嵌套语法上基本一样,简单快捷。
3.2.3 混入
在样式预处理器里面,你可以用一个变量,定义一段经常被用到的代码,然后供其他样式引用,方便快捷。这便是混入了。
在SASS里面,
- @mixin aq($borderWidth: 1px) {
- border: $borderWidth solid #F00;
- }
- .btn {
- padding: 5px;
- @include aq(2px);
- }
- .aq($borderWidth: 1px) {
- border: $borderWidth solid #F00;
- }
- .btn {
- padding: 5px;
- .aq(2px);
- }
3.2.4继承
继承和混入有点相似。
在SASS里面,
- .a {
- margin: 10px 5px;
- padding: 2px;
- }
- .b{
- @extend .a;
- border: 1px solid #000;
- }
在LESS里面,
- .a {
- margin: 10px 5px;
- padding: 2px;
- }
- .b{
- .a;
- border: 1px solid #000;
- }
3.2.5颜色函数
颜色函数是CSS预处里器中内置的颜色函数功能,这些功能可以对颜色值进行处理,对于颜色的变亮、变暗、渐变颜色等处理都挺好用的。
例如在SASS里面,
- invert($color); /* 返回$color的反相色 */
- lighten($color, 50%); /* 返回的颜色在$color基础上变亮50% */
- saturate($color, 50%); /* 返回的颜色在$color基础上饱和度增加50% */
- desaturate($color, 50%); /* 返回的颜色在$color基础上饱和度减少50% */
- grayscale($color); /* 返回$color的灰度色*/
- darken($color, 50%); /* 返回的颜色在$color基础上变暗50% */
在LESS里面,
- invert(@color); /* 返回@color的反相色 */
- lighten(@color, 50%); /* 返回的颜色在@color基础上变亮50% */
- saturate(@color, 50%); /* 返回的颜色在@color基础上饱和度增加50% */
- desaturate(@color, 50%); /* 返回的颜色在@color基础上饱和度减少50% */
- grayscale(@color); /* 返回@color的灰度色*/
- darken(@color, 50%); /* 返回的颜色在@color基础上变暗50% */
3.2.6 运算
- .a{
- padding: (100px/2);
- top: 10px + 100px;
- left: 100px - 50px;
- top: 10 * 10;
- }
其实还有很多细节的东西,有空我再慢慢补充了。
Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败,只有没到的成功。
Antroduction: 高级前端开发工程师
Sign: 人生没有失败,只有没到的成功。