css，less 和 sass

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的区别

1. 编译环境
   Sass的安装需要Ruby环境，是在服务端处理。
   Less不需要安装其他语言，在Node中进行编译。只需要导入less.js来处理然后输出css到浏览器。是在客户端处理。
   当然Less也提供服务器端的编译功能。

2. 变量符不同，变量的作用域不同
   变量符：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}// 红色边框

3. 输出设置
   Less没有输出设置。
   Sass提供4中输出选项：
   nested 嵌套缩进，
   compact 简洁格式，
   compressed 压缩后，
   expanded 展开的多行。

4. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

5. 引用外部CSS文件
   scss引用的外部文件命名必须以_开头。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件。
   Less引用外部文件和css中的@import没什么差异。

6. 工具库不同
   SCompass是Sass的工具库。是在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
   Less有UI组件库Bootstrap,iview等。

7. 继承
   Sass中，写好的选择器进行集成，需要@extend关键字。
   Less中，直接写入即可：.be-extend-class;

8. Mixin
   Sass中，需要进行Mixin操作的选择器需要@mixin关键字，选择器后可以传入变量和默认值。

9. 嵌套(相同点）
   Sass和Less均允许元素嵌套。如果父子选择器均用逗号分开，那么编译时会按结合律拆开编译。
   Sass和Less指代上层元素均使用&符号。

总结

不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。 Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。