sass學習

基本規則:

1. 變量用$定義
2. 僞類用&定義

3. 樣式可嵌套定義,如

   #example{ 
    a {
    body.ie & hover { color: red }
    color: white;
    }
       div {background:black;}
   }

4. body.ie & hover { color: red } <=> body.ie #example a:hover { color: red }
5. 嵌套規則適用羣組選擇器,> + ~選擇器(sass的嵌套其實就是拼接空格)

6. border: {

   style:                 
    left:             
    right:

   }
   <=>

   border-style:
    border-left:
    border-right:

@import的使用:

原生的只有執行到纔會加載,速度較慢;而sass的@import在生成文件時就導入,至關於合併css文件

1. 局部文件,約定用下劃線定義,如(_example.scss),局部scss文件不會單獨編譯,只會存在於引用的文件中.
2. 局部文件中的變量添加!default( 如 $val = red !default; ),表明默認值,未定義時生效,全局變量添加!global.
3. 嵌套中可調用局部文件,只在當前嵌套中有效
4. 使用原生@import的狀況:
   文件後綴爲.css；
   文件名爲URL地址（如http://www.sass.hk/css/css.css；
   文件名爲CSS的url()值

靜默註釋

編譯後不會顯示,格式: // 註釋

混合器

1. 經過@mixin mixin($a:red,$b)定義,@include 調用,:後面爲默認值
2. 使用時機: 可否爲這個混合器想出一個好的簡短的名字

繼承

1. @extend定義,繼承與父樣式有關的一切樣式(如: .child @extend .father)
2. 能夠使用選擇器,只對選擇器命中的樣式生效(後面部分),也對子類生效(前面部分).
3. 繼承至關於 .father .child,所以會出現複雜的選擇器.

4. 爲了不生成大量選擇器,不要在css規則中使用後代選擇器

   .foo .bar { @extend .baz; }
    .bip .baz { a: b; }

   這個例子有三個狀況 foo->bip->bar 、(foo,bip)->foo->bar、bip-> bar,若是其中一條規則的後代選擇器更復雜則代碼量呈指數增加.

理解

scss本質上是字符串的格式編譯，好比變量，由於是從上到下格式化成css，因此變量只能寫在最前面，編譯器讀取變量值而後替換引用的部分；又好比僞類、嵌套樣式，&則不添加空格直接拼接，：則添加一個-字符。