「项目实战」sass使用基础篇（上）

Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。
CSS预处理语言有Scss(Sass) 和Less、Postcss。
Scss和Sass
sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
区别：
后缀名不同 .sass和.scss
语法不同，请看下面
新版：
/新版本 多行文本注释/
//新版本
//单行文本注释
@import “base”;
@mixin alert{
color:red;
background:blue;
}
.alert-warning{
@include alert;
}
ul{
font-size:15px;
li{
list-style:none;
}
}
老版本：
/*新版本
多行文本注释
//新版本
单行文本注释
@import “base”
=alert
color:red
background:blue
.alert-warning
+alert
ul
font-size:15px
li
list-style:none
变量
变量的意义
在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护，更改方便
变量的使用
可以通过$来定义变量，在变量名字中可以使用-和来作为连接，并且-和是可以互通的，就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了
例如
$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：
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}

作者：MonkeySoft