Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。
CSS预处理语言有Scss(Sass) 和Less、Postcss。 Scss和Sass
sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法 区别：
代码语言：javascript复制后缀名不同 .sass和.scss
语法不同，请看下面
12新版：
代码语言：javascript复制/新版本
多行文本注释/
//新版本
//单行文本注释
@import “base”;
@mixin alert{
color:red;
background:blue;
}
.alert-warning{
@include alert;
}
ul{
font-size:15px;
li{
list-style:none;
}
}老版本：
代码语言：javascript复制/*新版本
多行文本注释
//新版本
单行文本注释
@import “base”
=alert
color:red
background:blue
.alert-warning
alert
ul
font-size:15px
li
list-style:none变量 变量的意义
在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护，更改方便 变量的使用
可以通过$来定义变量，在变量名字中可以使用-和_来作为连接，并且-和_是可以互通的，就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了
例如
代码语言：javascript复制$primary-color:#ff6600;
$primary-border:1px solid $primary_color;
div.box{
background:$primary-color;
}
h1.page-header{
border:$primary-border;
}
css写法—》
div.box {
background: #ff6600;
}
h1.page-header {
border: 1px solid #ff6600;
}嵌套的使用
合理的使用嵌套语法，可以使我们编写代码更为快捷
假设我们想写这样的css：
代码语言：javascript复制.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
在sass里我们可以这样写
.nav{
height:100px;
ul{
margin:0;
li {
float:left;
list-style:none;
padding:5px;
}
}
}大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写
代码语言：javascript复制.nav{
height:100px;
a{
color:#fff;
:hover{
color:#ff6600;
}
}
}在里面就会出现这样的情况
代码语言：javascript复制.nav a :hover {
color: #ff6600;
}我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类
例如：
代码语言：javascript复制.nav{
height:100px;
a{
color:#fff;
&:hover{
color:#ff6600;
}
}
}这样就好了，下面来个完整的代码：
代码语言：javascript复制.nav{
height:100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
}
a{
display:block;
color:#000;
&:hover{
color:#f60;
background:red;
}
}
}
& &-text{
font-size:15px;
}
123
}
css写法-----》
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul a {
display: block;
color: #000;
}更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118611969
