sass与Less
1、是什么，干什么用？
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。
2、为什么用sass
CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。
Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性
3、怎么用
sass安装
npm install -g sass
sass xxxx.scss xxxx1css 将sass文件处理成css
sass 变量
字符串/数字/颜色值/布尔值/列表/null 值
定义 $变量名：值
可以把项目中的样式重复值定义起来
sass有作用域，当级生效
！global可以设置全局，可以把所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件
sass可以嵌套规则和属性
sass@import 导入文件 语令如下@import filename;
Sass Partials 文件名前加下划线_filename，编译不生成css，但是导入有效，不需要使用下划线
注：不要将带下划线与不带下划线同一个目录下，否则下划线pass
sass混入用法
定义混入@minin name{属性1：值1，属性值2：值2，......}
使用混入@include name
混入还可以包含混入
混入可以接受参数
sass可以继承@extend
sass函数
字符串，数字，list，Map，选择器，调试，颜色
less大多数同sass，注意下区别
和less区别
1.编译环境不一样
LESS 源文件的引入方式与标准 CSS 文件引入方式一样：
<link rel="stylesheet/less" type="text/css" href="styles.less">
需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。
2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
原文：https://www.cnblogs.com/jiangxiaobai123/p/12106597.html