我们都知道写 CSS 代码是有些枯燥无味的,尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护,但它本不应该这样的。
很幸运,网站开发社区已经解决了这个问题,现在我们拥有诸如 Less, Sass 和 Stylus 之类的预处理器,它们给我们提供了许多优于纯 CSS 的好处。
使用预处理器的唯一缺点就是,你需要将代码转换为纯 CSS 代码,才能让它能够在浏览器中工作。
Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数.
Less是@,而Scss是$
Less-作用域
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {
border: 1px solid @color; /* 蓝色边框 */
}
Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}
scss-作用域
$color: #00c; /* 蓝色 */
#header {
$color: #c00; /* red */
border: 1px solid $color; /* 红色边框 */
}
#footer {
border: 1px solid $color; /* 蓝色边框 */
}
scss-作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
scss支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。 复制代码
/* Sample Sass “if” statement */
@if lightness($color) > 30% {
} @else {
}
/* Sample Sass “for” loop */
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
scss引用的外部文件命名必须以开头, 如下例所示:其中test1.scss、test2.scss、test3.scss文件分别设置的h1 h2 h3。 文件名如果以下划线_开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件.
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后:
h1 {
font-size: 17px;
}
h2 {
font-size: 17px;
}
h3 {
font-size: 17px;
}
Less引用外部文件和css中的@import没什么差异。