CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。
为了方便前端开发的工作量，出现了sass和less。
SASS
是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。
比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。
less
LESS，受Sass的影响较大，也使用CSS的语法，让大部分开发者和设计师更容易上手。
LESS保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。
使用方法
传统的css可以直接被html引用，
由于sass和less使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件。
sass和less的区别
- 编译环境
Sass的安装需要Ruby环境，是在服务端处理。
Less不需要安装其他语言，在Node中进行编译。只需要导入less.js来处理然后输出css到浏览器。是在客户端处理。
当然Less也提供服务器端的编译功能。
- 变量符不同，变量的作用域不同
变量符：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; /* 蓝色边框 */
}
// Sass-作用域编译后
#header{border:1px solid #c00} // 红色边框
#footer{border:1px solid #c00}// 红色边框
-
输出设置
Less没有输出设置。
Sass提供4中输出选项：
nested 嵌套缩进，
compact 简洁格式，
compressed 压缩后，
expanded 展开的多行。 -
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
- 引用外部CSS文件
scss引用的外部文件命名必须以_开头。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件。
Less引用外部文件和css中的@import没什么差异。
-
工具库不同
SCompass是Sass的工具库。是在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,iview等。 -
继承
Sass中，写好的选择器进行集成，需要@extend关键字。
Less中，直接写入即可：.be-extend-class; -
Mixin
Sass中，需要进行Mixin操作的选择器需要@mixin关键字，选择器后可以传入变量和默认值。 -
嵌套(相同点）
Sass和Less均允许元素嵌套。如果父子选择器均用逗号分开，那么编译时会按结合律拆开编译。
Sass和Less指代上层元素均使用&符号。
总结
不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。 Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。
网友评论