一。为什么要使用css预处理器呢
1.传统的css没有像js，一样拥有编程语言的能力，能够拥有常量、变量、以及语法，这样随着网站的发展势必会造成css代码会显得非常臃肿以及难以维护，于是css预处理器作为css的扩展就出现在了我们面前。
二。sass
是一种动态样式语言，sass语言属于缩排语法，比css多出很多功能比如，变量，嵌套，运算，混入，继承，指令、函数、颜色处理等等。
sass工作原理是将.scss文件交由sass编译器将其最终处理为能让浏览器能认识的css文件
二。sass与scss的区别(也就是说scss是sass的第三代)
一开始是出现了sass但由于语法不直观，存在缩进。也不能将css代码加入到sass中去，所以将sass3进行了改良，改成了scss,与原来的css兼容，只不过将{}取代了原来的缩进。
三。在vscode里安装插件，用于编译器编译成css文件，安装 LIve Sass Compiler插件 进行扩展配置，在setting.josn下配置。
{ /* 压缩设置 */ "liveSassCompile.settings.formats":[ // This is Default. { "format": "compressed", // nested, expanded, compact, compressed "extensionName": ".min.css", "savePath": "~/../css" // 为 null 表示当前目录 } ],/* 排除目录 */ "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], /* 是否生成对应的map */ "liveSassCompile.settings.generateMap": false,
/* 是否添加兼容前缀 如： -webkit- , -moz- ... */ "liveSassCompile.settings.autoprefix": [ "> 1%", "last 2 versions" ],
"liveSassCompile.settings.showOutputWindow": true } 四。sass的四种输出格式 五。sass功能对比 1.写法上选择器有层级嵌套，不会像之前的写一堆后代选择器 2.有&符号代替父元素写进去，比如 a:hover 可以用&：hover代替父元素a; 3.属性相同的也可以提出来，称为属性嵌套 4.占位选择器 五。这里补充一下css继承选择器的几个知识 1. .div .btn 这里是指后代选择器 选择。div下的所有btn类的子孙元素 2. .div>.btn 这里指的是.div下的.btn的子元素 3. .div.btn 这里指的是要选择既要具有。div类的元素也要选择具有.btn类的元素 六。变量 1.css3也可以使用变量
:root {
--primary-color: #007bff;
}
.button {
background-color: var(--primary-color);
}
2.在scss中变量是用$加变量名定义的，使用也是用$变量名使用，得先定义后使用。
$lh:#fff;
p{
color:$lh
}
七.import 导入
八.混入 mixin 是为了定义一个区域或者说模块的样式。 它可以传参
它有助于减少代码的重复，只需声明一次，就可以在文中引用，
什么时候用混入呢？很多地方都会用到，却能根据不同的场景灵活使用样式。
定义一个混入@mixin 混入名字{ } 使用@include 混入名字
九.继承 @extend
十。运算符 == 与 ！= 比较运算符 > < >= <=
逻辑运算符 and or not
十一。插值语句 #{}
标签：liveSassCompile,sass,处理器,div,btn,选择器,css From： https://www.cnblogs.com/lhnbclass/p/17574450.html