sass學習

lalaland發表於2018-10-08

基本規則:

  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，所以變數只能寫在最前面，編譯器讀取變數值然後替換引用的部分；又比如偽類、巢狀樣式，&則不新增空格直接拼接，：則新增一個-字元。

相關文章