Sass 扩展

Sass 扩展

1. 简介

Sass 还为我们提供了很多非常高级的自定义功能,不过这需要你拥有非常良好的 Ruby 基础才能随心所欲的运用这些功能。所以本节内容也是作为了解的内容,使我们可以更全面的了解 Sass,本节我们将对自定义 Sass 函数和存储缓存做一个简单的讲解。

2. 自定义 Sass 函数

我们前面的 Sass 函数指令讲过可以通过 @function 来定义函数,这个自定义函数和本节讲的并不一样,本节中的自定义函数是通过 Ruby 语言来自定义用于 Sass 的函数,我们这里贴出一段使用 Ruby API 扩展 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

不懂这段代码没关系,我们只是作为@use “sass:color”;
@use “sass:meta”;一个了解,知道 Sass 的函数是可以扩展的就好,我们在前端项目中是用不到的,这个自己有兴趣可以自行深入研究。

其实 Sass 为我们提供了很多内置模块,这其中就包含很多有用的函数,我们使用这些模块也能很好的实现我们的扩展需求。我们可以通过 @use 来加载内置模块,所有的内置模块都以 sass 开头以表示它们属于 Sass 的一部分,我们举例看下:

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

实际上基本我们是用内置模块来完成很多自定义的功能,或者自定义函数,或者是 JavascriptAPI,基本不会接触到 Ruby 去扩展。而且随着 Dart-sass 的发布,Ruby-sass 已经被弃用,是在 2019 年 3 月 26 日左右被弃用的。

3. 存储缓存

说到存储缓存就更复杂了,因为这还会涉及到文件系统,如果你对这些不是很了解可以试着了解一下,如果不太明白可以先略过,随着你在计算机行业的沉淀,慢慢就会理解这个,这属于 Sass 的源代码和设计思想范畴。

Sass 会缓存已经解析的文档,以便可以重用它们,这样就不用再次对这些文档进行解析,这个就很像我们所熟知的 http 缓存。一般来说 Sass 会把缓存存储在文件系统上,并且会通过 cache_location 标识其存储位置,如果你想更改缓存的位置或者其他相关的选项,首先你需要有对文件的读写权限,然后在进程之间共享缓存,同时 Sass 为我们提供了配置项来修改这些。

我们可以在命令行中使用 –cache-location 来更改缓存存储的位置,以便在后面的调用中运行的更快,这需要 Ruby 环境,用法如下:

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

除了上面的配置外,我们还可以通过在命令行中使用 --no-cache 来取消 Sass 对解析文件的缓存,这同样需要 Ruby 环境,用法如下:

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

4. 小结

本节内容主要是为了让大家了解 Sass 的一些高级玩法,比如自定义函数和自己设置存储缓存,实际的工作中并不会用到,但如果你要加入到 Sass 的官方开发团队中,这些东西就有必要去深入了解了。这些就不止是前端的范畴了,还会涉及到 Ruby 、Dart、C++ 等编码语言,如果你对这些有着浓厚的兴趣,可以去深入理解 Sass 的机制和扩展。