一、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{
width:960px;
height : 40px;
ul{
margin-left : 20px;
li{
float: left;
}
}
}
復合屬性嵌套：
border:{
color: red;
style:solid;
width:1px;
}
&表示繼承父級標簽
a{
&:hover{ color:red }
}
在sass的嵌套的過程中，如果需要用到父元素，在 SASS 中通過（& ）符號引用父屬性
4、代碼重用、混合(函數)： sass如何實現代碼重用 ，有幾種方式 ~~~
width:960px;
margin:0 auto;
第一種方案 ： 類的繼承 使用.定義一個類 然后通過 @extend 調用這個類（缺點：不能定義參數）
.public{ //無參數 使用 @extend .public;
width:960px;
}
總結：sass中定義一個類，要繼承這個類，需要使用的關鍵字是 （@extend）
第二種方案 ： 使用 @mixin 定義一個代碼塊 使用 @include 調用這個代碼塊 （先定義 后調用） 該方式可以定義參數
該方式用於定義可重復使用的樣式，避免了使用無語意的class
如果參數有默認值 該參數放到后面
@mixin public{ //可以定義參數 使用 : @include 導入 先定義 后調用 （混合定義）
....
}
@mixin public($height:200px){//定義一個默認值
width: 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 } { width: 2em * $i ; } // .item1 .item2 .item3
}
循環語句兩種寫法：
@for $i from 1 to 4 { 語句;}
@for $i from 1 through 4{ 語句;}