Sass 環境/語法/手機優先項目實踐

分享一下這兩天搞 sass 的學習成果。

直接點擊下圖，可觀看視頻教程

本文主要分爲三個部分，分別是

• 環境
• 語法
• 實踐

環境

安裝 sass 工具， 很簡單，參考官方文檔

連接在這裏 https://www.sasscss.com/install

主要介紹一下開發環境。以 VSCODE 爲例，

我安裝了這樣幾個插件分別是：

• sass,提供 sass 語法高亮
• sass live compile 自動生成 css 插件，可 watch 本地文件發生修改，自動觸發生成
• live server 啓用一個簡單 http 服務，提供 html 頁面快速預覽

須要修改插件配置話，快捷鍵 command + , ，打開 vscode 配置。

查找 sass live找到相應的配置，增長我的配置：

"liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "./dist"
        }
    ],

語法

這裏主要介紹實際項目中最經常使用的基礎語法。

語法格式

在 sass 中主要支持兩種語法格式，分別以 .scss、 .sass做爲後綴。

.scss 語法相似 css 語法
.sass 語法更簡潔，可是切換起來有點麻煩

因此，推薦使用 .scss 語法

變量

若是將樣式設計看作一個黑盒的話，變量，就是是這個黑盒對外開放的接口。

變量定義的方式，很簡單。

$background-color: red;

嵌套語法

div h1 {
　　color : red;
}

嵌套語法的格式是

div {
    h1 {
    　　color : red;
    }
}

子文件 與 子文件引入

爲了讓 sass 預處理，區分 主 css 文件與 子 css 文件的區別，增長了文件名稱的 _ 前綴。

未進行 _ 前綴的 css 文件不會被當成子文件處理。

@import 子文件時，不須要，明確設置 _ 前綴與 .scss 或是 .sass 後綴。這些，在 @import 時會被自動補齊。

公共模塊 @mixins 與 公用模塊引入 @include

@mixins 相似於 c 語言中的 宏定義，經過 @mixins 定義能夠簡化 css 重複代碼的使用。

常規使用方式，有兩種：

• 明確的內容

@mixin border {
　　　border: 1px solid blue;
}

div {
    @include border;
}

生成的代碼是:

div {
    border: 1px solid blue;
}

• 非明確內容

@mixin mobile {
  @media screen and (max-width: 768px) {
    @content;
  }
}

body {
    background-color: blue;
}

@include mobile {
    body {
        background-color: red;
    }
}

這樣生成的代碼就是:

body {
    background-color: blue;
}

@media screen and (max-width: 768px) {
    body {
        background-color: red;
    }
}

這種寫法，會被常常使用在響應式樣式設計上。

至於 @mixin 模塊的參數傳遞很是簡單，你們參考相關文檔。

函數操做

函數操做，主要分爲：

• 內嵌函數

  • 字符串處理
  • 數字處理
  • List 處理
  • Map 處理
  • 選擇器函數
  • 顏色處理函數
  • 功能性輔助函數
• 自定義函數

@function double($n) {
　　@return $n * 2;
}

#top {
　　width: double(5px);
}

不過，即便 sass 提供了豐富函數操做，咱們必須記住一點，就是：

sass 是一門預處理語言，其執行的階段是在程序的與編譯階段。

一些想要實現執行期(runtime)樣式動態變化的功能，不是 sass 能夠作的事。

關於 執行期(runtime)樣式 的技術， 你們能夠參考 styled-components這個項目。

實踐項目

到底一個真實的手機優先的 sass 項目是如何實現的，下面咱們就來實操一下整個過程。

具體項目地址: gitdigg/sass-demo

閱讀全文

閱讀全文，請訪問 Sass 環境/語法/手機優先項目實踐

視頻教程，請點擊動圖。