Sass 擴(kuò)展

1. 簡介

Sass 還為我們提供了很多非常高級的自定義功能，不過這需要你擁有非常良好的 Ruby 基礎(chǔ)才能隨心所欲的運(yùn)用這些功能。所以本節(jié)內(nèi)容也是作為了解的內(nèi)容，使我們可以更全面的了解 Sass，本節(jié)我們將對自定義 Sass 函數(shù)和存儲緩存做一個簡單的講解。

2. 自定義 Sass 函數(shù)

我們前面的 Sass 函數(shù)指令講過可以通過 @function 來定義函數(shù)，這個自定義函數(shù)和本節(jié)講的并不一樣，本節(jié)中的自定義函數(shù)是通過 Ruby 語言來自定義用于 Sass 的函數(shù)，我們這里貼出一段使用 Ruby API 擴(kuò)展 Sass 的代碼來感受下：

module Sass::Script::Functions
    def myCustomSass(string)
    assert_type string, :String
    Sass::Script::Value::String.new(string.value.myCustomSass)
  end
  declare :myCustomSass, [:string]
end

不懂這段代碼沒關(guān)系，我們只是作為@use “sass:color”;
@use “sass:meta”;一個了解，知道 Sass 的函數(shù)是可以擴(kuò)展的就好，我們在前端項(xiàng)目中是用不到的，這個自己有興趣可以自行深入研究。

其實(shí) Sass 為我們提供了很多內(nèi)置模塊，這其中就包含很多有用的函數(shù)，我們使用這些模塊也能很好的實(shí)現(xiàn)我們的擴(kuò)展需求。我們可以通過 @use 來加載內(nèi)置模塊，所有的內(nèi)置模塊都以 sass 開頭以表示它們屬于 Sass 的一部分，我們舉例看下：

@use "sass:color";
@use "sass:meta";
@use "sass:math";

實(shí)際上基本我們是用內(nèi)置模塊來完成很多自定義的功能，或者自定義函數(shù)，或者是 JavascriptAPI，基本不會接觸到 Ruby 去擴(kuò)展。而且隨著 Dart-sass 的發(fā)布，Ruby-sass 已經(jīng)被棄用，是在 2019 年 3 月 26 日左右被棄用的。

3. 存儲緩存

說到存儲緩存就更復(fù)雜了，因?yàn)檫@還會涉及到文件系統(tǒng)，如果你對這些不是很了解可以試著了解一下，如果不太明白可以先略過，隨著你在計(jì)算機(jī)行業(yè)的沉淀，慢慢就會理解這個，這屬于 Sass 的源代碼和設(shè)計(jì)思想范疇。

Sass 會緩存已經(jīng)解析的文檔，以便可以重用它們，這樣就不用再次對這些文檔進(jìn)行解析，這個就很像我們所熟知的 http 緩存。一般來說 Sass 會把緩存存儲在文件系統(tǒng)上，并且會通過 cache_location 標(biāo)識其存儲位置，如果你想更改緩存的位置或者其他相關(guān)的選項(xiàng)，首先你需要有對文件的讀寫權(quán)限，然后在進(jìn)程之間共享緩存，同時 Sass 為我們提供了配置項(xiàng)來修改這些。

我們可以在命令行中使用 –cache-location 來更改緩存存儲的位置，以便在后面的調(diào)用中運(yùn)行的更快，這需要 Ruby 環(huán)境，用法如下：

$ sass --cache-location=/global/my-cache style.scss style.css

除了上面的配置外，我們還可以通過在命令行中使用 --no-cache 來取消 Sass 對解析文件的緩存，這同樣需要 Ruby 環(huán)境，用法如下：

$ sass --no-cache style.scss style.css

4. 小結(jié)

本節(jié)內(nèi)容主要是為了讓大家了解 Sass 的一些高級玩法，比如自定義函數(shù)和自己設(shè)置存儲緩存，實(shí)際的工作中并不會用到，但如果你要加入到 Sass 的官方開發(fā)團(tuán)隊(duì)中，這些東西就有必要去深入了解了。這些就不止是前端的范疇了，還會涉及到 Ruby 、Dart、C++ 等編碼語言，如果你對這些有著濃厚的興趣，可以去深入理解 Sass 的機(jī)制和擴(kuò)展。