Sass 擴(kuò)展

1. 簡(jiǎn)介

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

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

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

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

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

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

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

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

3. 存儲(chǔ)緩存

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

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

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

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

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

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

4. 小結(jié)

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