css预处理语言
写sass然后使用工具将其编译成css
sass比css多了很多功能，比如定义变量/循环/嵌套等
sass的语言版本有两种，老版本的后缀名是.sass，新版本的后缀名是.scss
在项目中准备使用sass代替css，所以需使用gulp-sass来对sass进行编译需下载（node-sass gulp-sass）
动态的css
sass 动态的css
写一些语法规范 变量 嵌套 类的重用....
sass
body
background:red;
font-size:12px;
scss
body{
...
}
考拉使用 ：
拖拽css目录
设置输出路径 scss文件要输出的css文件
识别中文 ： @charset "utf-8";
sass语法：
注释
// 不能被css识别
/**/ 可以被css识别
变量定义
$变量
传统css嵌套
.nav {
...
}
.nav ul{
...
}
.nav ul li{
...
}
嵌套方式
.nav{
960px;
height : 40px;
ul{
margin-left : 20px;
li{
float: left;
}
}
}
符合属性嵌套
border:{
color: red;
style:solid;
1px;
}
&表示继承父级标签
a{
&:hover{ color:red }
}
代码重用(函数)
sass如何实现代码重用 ，有几种方式 ~~~
960px;
margin:0 auto;
.public{ //无参数 使用 @extend .public;
960px;
}
@mixin public{ //可以定义参数 使用 : @include 导入 先定义 后调用 （混合定义）
....
}
@mixin public($height:200px){//定义一个默认值
960px;
height: $height;
margin: 0 auto;
}
#header{
@include public(400px);给具体的参数值 默认值无效，如果不传递参数 就按照默认值执行
}
导入： @import "xxx.scss" 将多个scss文件合并成一个css文件
if语句
$type : monster;
$flag : false;
@if $type==monster {
display :inline ;
}
@if $flag {
p {color :red; }
} @else{
p {color :blue; }
}
for语句
@for $i from 1 through 3 {
.item-#{$i } { 2em * $i ; } // .item1 .item2 .item3
}