一、sass语法
sass功能 ：
它使用自己的语法并编译为可读的CSS
可以在更少的时间内轻松地编写CSS代码
是一个开源的预处理器，被解释为CSS
可以兼容所有的CSS版本
sass是动态的css
写一些语法规范 变量 嵌套 类的重用....
考拉使用 ：
拖拽css目录
设置输出路径 scss文件要输出的css文件
识别中文 ： @charset "utf-8";
sass语法
1、注释 ： // 不能被css识别 /**/ 可以被css识别
sass中有哪些注释类型 ： //注释 /*注释*/
2、变量定义 ： $变量
3、嵌套 ：
传统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的嵌套的过程中，如果需要用到父元素，在 SASS 中通过（& ）符号引用父属性
4、代码重用、混合(函数)： sass如何实现代码重用 ，有几种方式 ~~~
960px;
margin:0 auto;
第一种方案 ： 类的继承 使用.定义一个类 然后通过 @extend 调用这个类（缺点：不能定义参数）
.public{ //无参数 使用 @extend .public;
960px;
}
总结：sass中定义一个类，要继承这个类，需要使用的关键字是 （@extend）
第二种方案 ： 使用 @mixin 定义一个代码块 使用 @include 调用这个代码块 （先定义 后调用） 该方式可以定义参数
该方式用于定义可重复使用的样式，避免了使用无语意的class
如果参数有默认值 该参数放到后面
@mixin public{ //可以定义参数 使用 : @include 导入 先定义 后调用 （混合定义）
....
}
@mixin public($height:200px){//定义一个默认值
960px;
height: $height;
margin: 0 auto;
}
#header{
@include public(400px);给具体的参数值 默认值无效，如果不传递参数 就按照默认值执行
}
总结：sass中使用@mixin定义了一段代码块，需要使用的关键字是 ： （ @include）
sass中混合和函数的不同点：
函数有返回值 sass混合没有
混合的结果是一段代码
5、导入： @import "xxx.scss" 将多个scss文件合并成一个css文件
sass中用于导入一个新文件的关键字是 ：@import
6、if语句 :
$type : monster;
$flag : false;
@if $type==monster {
display :inline ;
}
@if $flag {
p {color :red; }
} @else{
p {color :blue; }
}
例如 ：
这个代码正确输出是
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if 5 >6 { border: 4px dotted; }
@if null { border: 3px double; }
}
7、for 语句：
@for $i from 1 through 3 {
.item-#{$i } { 2em * $i ; } // .item1 .item2 .item3
}
循环语句两种写法：
@for $i from 1 to 4 { 语句;}
@for $i from 1 through 4{ 语句;}