sass和less,优秀的前端样式预处理器
身为切图界的一员,或者说在前端界打滚了一段日子的你。会慢慢地发现。如今的css编写已经不能满足自己的效率。
假设有更强大的框架,让你的css更灵活和更easy复用和维护,那该多好啊。非常明显,这个早已经不是什么新奇事,sass和less就是这么2个非常优秀的样式预处理器。能让你的效率高速提高。接下来就谈谈它们。
1.样式预处理器的定义
样式预处理器,简单地来概括就是技术大牛通过一门新的语言,让css的编写具备各种变量和属性,你依照它的语法写好后,就能编译,生成对应的css文件。
当然这些处理器能够让你的css更简洁,易懂,具备更强的可移植性和维护性。
前端界里面,譬如Sass、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等都是上面所说的样式预处理器。这里不一一介绍,我仅仅说一下比較优秀的sass和less。
2.sass和less这对好基友
2.1 sass的前世今生
2.2 less的前世今生
LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。
3.框架的对照
3.1 实现方式的不一样
LESS和Sass的主要不同就是他们的实现方式。LESS是基于JavaScript,是在client处理的。然而。Sass是基于Ruby的,是在server端处理的。
非常多开发人员不会选择LESS由于JavaScript引擎须要额外的时间来处理代码然后输出改动过的CSS到浏览器。
可是LESS环境较Sass简单。这也使得不少的童鞋选择LESS。
3.2 语法上的共性
Sass使用“.scss”扩展名,而LESS使用“.less”扩展名。
3.2.1 变量
$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 混入
@mixin aq($borderWidth: 1px) { border: $borderWidth solid #F00; } .btn { padding: 5px; @include aq(2px); }在LESS里面。
.aq($borderWidth: 1px) { border: $borderWidth solid #F00; } .btn { padding: 5px; .aq(2px); }
3.2.4继承
.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颜色函数
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: 高级前端开发project师
Sign: 人生没有失败,仅仅有没到的成功。
posted on 2017-06-11 13:30 yjbjingcha 阅读(376) 评论(0) 编辑 收藏 举报