Sass/Scss 基礎篇

技世安邦發表於2021-03-07
CSS

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被使用時，用佔位符。

相關文章