sass预编译css扩展语言介绍

sass基础
1 sass是一个预编译css扩展语言，使得css具有可编程性，sass文件是不可以直接运行，需要借助工具，比如：koala；sass命令行；编译成css文件才可以运行。koala编译完成的效果没有办法和后面的node项目合成，建议使用sass编译工具；
2 npm安装sass编译工具
安装：npm install -g sass
查看版本：sass --version
两种书写语法：sass
scss
运行：sass sass文件 css文件
可以使sass文件编译到css文件夹下：sass sass文件目录：css文件目录

a.css.map：使用sass 命令会完成编译 生成一个后缀为.map文件，map 是一个css映射文件， map里会说明你代码问题出在哪个sass文件中 方便你去修改sass文件。

掌握四点
1 变量

2 嵌套

nav父节点下面是ul子节点 ，ul节点下面有个li节点，li下有个a标签，&引用父对象 &:link, &:visited；
border是属于ul的属性嵌套，代码如下：.nav ul {
border-width: 1px;
border-color: #303030;
border-style: solid;
list-style: none;
}
3 混合（继承）
没有参数
定义:@mixin button () {
width:100px;
height: 48px;
text-align: center;
color: #333;
}
调用: .buttton-primary {
@include button();
}
传参数
定义
@mixin button (KaTeX parse error: Expected 'EOF', got '#' at position 7: color:#̲333,bgcolor:#eee{
width:100px;
height: 48px;
text-align: center;
color:$color;
background: $bgcolor;
border: {
width: 1px;
color: #f60;
style: solid;
}
}
调用:
.button-primary {
@include button(#fff, green);
}
.button-warning {
@include button(#fff, #f60);
}
继承：
@extend 其他选择器
.box{
width:100px;
height: 200px;
text-align: center;
border: 1px solid #f60;
}
.box2 {
@extend .box;
border: 2px solid #f40;
}、

4 导入 实现了模块化
@import “模块的名字” 不用写后缀
假如有很多sass文件，最后通过@import 合成一个文件，如果有哪个sass文件不需要编译，文件名前加_前缀，sass命令就不编译了。
小知识
1 开启sass文件更新监控 自动可以生成css文件： sass --watch sass目录 css目录
2 四种显示风格
sass sass文件 css文件 --style 风格样式
:nested 默认 生成手写体 换行 有注释
:expanded
:compact
:compressed 压缩 (重点)
sass sass文件 css文件 --style compressed 生成压缩版的css文件
3 默认是生成 map文件
不上生成map文件： sass文件 css文件 --no-source-map