Sass/Scss 基礎篇

Sass/Scss 基礎篇

總結Sass學習到的內容

---

• 應用Sass/Scss前，環境配置

  1. 首先下載Ruby (http://rubyinstaller.org/downloads)
  2. 經過命令下載sass gem install sass
  3. VScode配置 下載插件 Live Sass Compiler
  4. VScode配置 配置工做區中的setting.json

     "liveSassCompile.settings.formats":[
         // 擴展
         {
             "format": "compact",//可定製的出口CSS樣式（expanded，compact，compressed，nested）
             "extensionName": ".min.css",//編譯後綴名
             "savePath": null//編譯保存的路徑
         } 
         
     ],
     "liveSassCompile.settings.generateMap": false, //不生成map文件
     "liveSassCompile.settings.excludeList": [
         "**/node_modules/**",
         ".vscode/**"
         **    // 只是編譯當前的sass文件
      ],
     "liveSassCompile.settings.autoprefix": [
         "> 1%",  //">1%"是指 經過全球使用狀況統計信息選擇出的高於1%使用率的瀏覽器版本。
         "last 3 versions"  //"last 3 versions"是指 每一個瀏覽器的最後3個版本。
         或
         "ie >= 6",  //ie6以上
         "firefox >= 8",
         "chrome >= 24",
         "Opera>=10"
     ]

• Sass與Scss的區別

  Sass編譯寫法偏向於Python 沒有大括號{}以及分號；
  Scss編譯寫法偏向於CSS 有大括號和分號

• 編譯方法

  1. 命令編譯
     <Sass文件PATH> : <編譯後的CSS文件的PATH> (單文件)
     sass/ : css/ (多文件)
     sass --watch 自動監測代碼變化，自動編譯
  2. GUI編譯 （VScode的自動編譯 上面已配置）
  3. 自動化編譯 Grunt和Gulp自動化 <cm: 後期要把這部分補上>

• 編譯出的樣式

  1. 嵌套 -- nested 大括號不單都佔行
  2. 展開 -- expanded 大括號單都佔行
  3. 緊湊 -- compact 每項只佔一行
  4. 壓縮 -- compressed 所有一行 （後期推薦使用此方法，減輕文件所佔內存）

---

Sass/Scss 基礎知識

• 默認變量聲明：$btn-primary-color : #fff !default;
  想要改變默認值要在默認語句前面定義

• 註釋： //不在編譯後CSS文件中顯示 /* */在編譯後CSS文件中顯示

• 數據類型：
  數字，字符串，顏色，布爾值，空值，值列表（用空格或逗號分開）

• 字符串:
  有引號字符串"header-1"
  無引號字符串 sans-serifbold
  可是在使用插值的時候，不管調用的是不是無引號的字符串，都會被編譯成無引號的字符串

• 值列表：
  nth：訪問值列表的某一項（第幾項）
  append： 添加
  join： 鏈接多個列表
  @each：遍歷值列表中的全部項目

• 運算：
  加 減 乘 除
  乘法運算時： 20px * 2 後面的數字不能帶單位
  除法運算時：
  在代碼中"/"被認爲是除法的狀況：

  1. 算式中有變量
  2. 除法算式被()包圍
  3. 不僅有除法運算時

  當進行顏色運算時，十六進制#xxxxxx 當成十進制數字運算

---

Sass/Scss 經常使用標準方法--重要

• 嵌套：

  -- 父類子類嵌套

  1. 選擇器嵌套
  2. 屬性嵌套
  3. 僞類嵌套
     注：儘可能避免使用選擇器嵌套，避免選擇器太具體。不然對於後期維護，以及代碼可讀性都有不好的體驗

• 混合宏：@mixin （重點）

  -- 至關於用於被調用的小函數，用於經過一樣的算法，自動生成各自的樣式

  • 特色：
    1. 可帶參數
    2. 調用方法 @include
    3. 可傳一個不帶值的參數--變量
    4. 傳一個帶值的參數--常量
  • 缺點：
    不動自動合併相一樣式的代碼

• 擴展/繼承：@extend

  -- 至關於CSS中堆疊樣式,在父類樣式的基礎上再添加或改變樣式

• 佔位符：%xxx

  -- 不被調用時，不會產生CSS代碼，能夠節省空間

• 插值：Interpolation

  -- 與JS中join方法很像，主要是拼接功能

  • 能夠用在調用繼承以及調用佔位符的時候，拼接選擇器，拼接佔位符的名，以及能夠用於拼接屬性 例：margin-top
  • 不能用於拼接變量&xx，混合宏的函數名 會報錯

問題探討

• 混合宏 VS 繼承 VS 佔位符 （優劣對比）

  混合宏： 若是你的代碼中涉及到變量，建議使用混合宏來建立相同代碼。 繼承： 不須要變量時，而且基類(父類)在HTML中被使用時用繼承 佔位符： 基類(父類)不在HTML被使用時，用佔位符。