综述:sass使用编程的思维来开发css,代码得到了复用,提高了开发效率,类似的还有less
1.sass的优势?
sass预处理器,他依赖于ruby(runtime),在开发前需要先安装开发环境,sass的主要特点和优势有:
-
sass分为sass和scss两个版本,scss版本是最新的,其中是由大括号的,更加靠近css的语法,sass则是上一个版本的语法
-
可以使用变量来定义宽度,高度等,做到统一管理的效果
-
可以使用嵌套css规则,避免针对一个元素中的子元素,要写好几遍的父元素的选择器
-
可以在scss文件中使用@import导入scss的文件,然后在发布的时候,自动将文件合并为一个css文件
-
静默注释,例如:/*注释内容*/,在代码中注释,方便开发人员理解,但是在最终上线的时候,会自动将这些注释清除掉。避免他人通过浏览器理解我们的代码
-
混合器@mixin,可以实现代码的复用,提高开发效率
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
-
使用选择器继承来精简CSS,避免写多余的css样式
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
2.sass的劣势有哪些?
-
舍弃用户体验来提高开发的效率,可以查考Bootstrap的缺点;
-
舍弃网页打开速度换取开发效率提升;
-
需要一个学习的过程,用之不当反而弄巧反拙;
-
总而言之,LESS/SASS缺点就是需要多一个编译器来重新编译一次你的CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢(网页显示顺序,从上至下,一般CSS放在头部,先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片,视频,音频--->最后完全显示)
你在CSS工序加了一个步骤,速度自然慢,时间自然多了。
什么网站适合LESS/SASS,企业网站,个人网站,普通静态页。
如果淘宝用了LESS/SASS,估计淘宝每年会失去至少5千亿成交额