使用sass预处理器的优劣

综述：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的劣势有哪些?

扫描二维码关注公众号，回复： 2892997 查看本文章

舍弃用户体验来提高开发的效率，可以查考Bootstrap的缺点；
舍弃网页打开速度换取开发效率提升；
需要一个学习的过程，用之不当反而弄巧反拙；
总而言之，LESS/SASS缺点就是需要多一个编译器来重新编译一次你的CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢（网页显示顺序，从上至下，一般CSS放在头部，先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片，视频，音频--->最后完全显示）

你在CSS工序加了一个步骤，速度自然慢，时间自然多了。
什么网站适合LESS/SASS，企业网站，个人网站，普通静态页。
如果淘宝用了LESS/SASS，估计淘宝每年会失去至少5千亿成交额

使用sass预处理器的优劣

1.sass的优势？

猜你喜欢