听说你还不会SCSS？带你掌握scss所有知识点(上)：Sass的介绍、安装和文件编译

代码迷途
5,324 阅读10分钟

Sass介绍

Sass(Syntactically Awesome StyleSheets)是一种CSS预处理器(preprocessor)， 是一款强化 CSS 的辅助工具。可以高效的编写样式，同时实现变量、嵌套、组合、继承等编程语言功能。

css是一门非程序式语言，没有变量、函数、scope(作用域)等概念。

  • CSS需要书写大量看似没有逻辑的代码，冗余度比较高

  • 不方便维护及扩展，难以复用

  • css没有很好的计算能力

  • 非前端工程师往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者只要使用这种语言进行CSS的编码工作就可以了。

“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。”

关于scss和sass

sass是最早出现的css预处理语言，有着比less更强大的功能。采用Ruby语言编写。

最初版本采用的是严格缩进的风格（不带大括号( {} )和分号( ; )，这一语法也导致一开始，sass并不太为开发者所接受）。

从 V3 版本开始放弃了缩进式的风格，并完全兼容普通的css代码，也因此从第三代开始，sass也被称为scss。

Sass 3 就是 Scss，是Sassy CSS的简写，它是CSS3语法的超集，也就是说所有有效的CSS/CSS3样式也同样适合于Sass。

对现代编程来说，sass就是scss，也因此，sass现在的扩展名为.scss（如果是旧版本的sass，可能扩展名会为.sass）。

关于Sass实现

Sass/Scss实际上充当的是定制规则的角色，根据这个规则，可以在多种语言下实现，也就是，Sass有多种实现，以便于在不同的服务器或工具链下，实现Sass的编写和编译。

Sass的最早的实现是基于Ruby语言（也是19年之前的主要实现版本），但是从 2019年 3 月 26 日开始，官方将不再对其提供任何支持，下文仅在附：Ruby Sass的安装使用中对Ruby Sass安装做个简要介绍。

Dart Sass

Dart Sass 是 Sass 的主要实现版本，里面包含的功能最新最全，并且可以被编译为纯 JavaScript 代码，用于集成到Web开发中（Node工具链、纯前端开发等）。

官方也推荐使用 Dart Sass 的 js API 替代 Node Sass，用在现代web开发的工作流中【Node Sass存在着各种各样的小bug和奇怪的问题，在实际web开发中，几乎处于被遗弃的地步】。

LibSass及各语言的包装实现

LibSass 是用 C/C++ 实现的 Sass 引擎。 核心点在于其简单、快速、易于集成。

用直白的话说就是，LibSass用于在其他语言中进行包装，以适应在不同的开发语言中使用。

LibSass 只是一个工具库，不能进行Sass代码的编译，需要对其进行封装才能使用。

目前，几乎所有的语言都有相应的封装实现。

  • SassC： C 语言开发的封装
  • go-libsass、gosass：Go 语言的封装实现。
  • LibSass Host：.NET 下的实现。
  • sass.js：用于在 JavaScript 中使用。
  • libsass-python：Python语言下的封装实现。
  • jsass：Java 封装。
  • SassPHP：PHP语言。
  • lua-sass：Lua语言的封装。
  • sassc-ruby：是Ruby语言下，基于LibSass的封装。

此外还有其他各种实现，具体参见官网介绍。

Sass的安装

方式一：独立安装

从 dart-sass releases 中选择适合自己系统的版本，独立下载并安装。

比如目前window下最新版的 dart-sass-1.43.3-windows-x64.zip。解压缩后，将sass.bat文件所在目录加入 Path 环境变量即可。

可以看到，在window下实质是通过 bat 脚本文件，调用src下的dart.exe并传入sass.snapshot和参数。

这就会出现，如果使用git的bash命令行工具，可能无法识别bat文件并执行。

只能在powershell或cmd下执行。

查看sass的版本：

> sass --version
1.43.3

方式二：通过 npm 安装

另外一种安装方式就是通过 npm 全局安装

npm install -g sass

Sass文件编译快览

将sass编译为css文件的方式有很多，最常用的应该是命令行编译，还可以使用vscode插件Live Sass Compiler、sublime插件SASS-Build、编译软件koala，及各种语言下的LibSass的封装等。

命令行编译

直接将一个scss文件编译为css文件：

//单文件转换命令
sass input.scss:output.css

// 或 sass input.scss output.css

使用 : 编译输出时，前后不能有空格，即 : 前紧跟输入的scss文件，: 后紧跟输出的css文件。

: 冒号形式的命令，常用于编译文件夹（中的所有sass文件）的输入输出。

关于生成时使用空格和冒号的问题

空格和冒号对应生成css的两中模式，如果是一对一模式（一个scss生成一个css），使用空格即可；如果是多对多模式，比如一个文件夹生成到另一个文件夹，同时一次性有多个scss文件生成css文件等。

​# 编译 light.scss 和 dark.scss 到 light.css 和 dark.css.
> sass light.scss:light.css dark.scss:dark.css

​# 编译 themes/ 文件夹中所有scss 到 public/css/ 中的css
$ sass themes:public/css

命令行编译配置选项

可以通过 sass -h 或 sass --help 查看详细配置项。

配置选项可以指定编译后的css的排版、是否生成调试map、开启debug等，最常用的是 --style 和 --sourcemap。

--watch监听文件变化

sass使用--watch选项，用于监听scss文件的变化。这样，当scss文件内容有改动时，会自动编译为css。

  • 监听单个scss文件
> sass --watch .\firstsass.scss .\firstsass1.css
Sass is watching for changes. Press Ctrl-C to stop.
  • 监听scss文件夹
> sass --watch .\scssdir\ .\cssdir\
Sass is watching for changes. Press Ctrl-C to stop.

Compiled scssdir\my.scss to scssdir\my.css.
^C终止批处理操作吗(Y/N)? y

> sass --watch scssdir:cssdir
Compiled scssdir\my.css to cssdir\my.css.
Sass is watching for changes. Press Ctrl-C to stop.

Compiled scssdir\another.scss to cssdir\another.css.

可以看到，使用 : 可以指定输出的路径（文件夹），否则css将默认生成在源scss文件所在目录中。

  • 结合 --style 监听
sass --watch app/sass:public/stylesheets --style=compressed

--style指定css的样式

--style 的css格式有两种：expanded（默认）、compressed。

旧版本的Ruby实现中有四种样式，还有nested、compact。

// 指定编译格式
sass input.scss:output.css --style=expanded

比如，一个scss文件如下：

.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

下面，可以查看expanded、compressed编译后的css格式。

  1. expanded ：默认值，未压缩的展开的css格式

每个选择器和声明单独一行。

执行如下命令编译：

sass styletest.scss styletest.css --style=expanded

# 或 sass styletest.scss styletest.css

expanded编译过后的样式，是标准的没有经过任何压缩，全部字符展开的css格式：

.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
  1. compressed 去除所有的空白字符，全部css内容压缩为一行

生产环境中推荐的css格式。

执行如下命令编译，将css结果输出在命令行中：

> sass --style=compressed styletest.scss
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

--no-source-map 有关 sourcemap 调试

source map 默认是开启的，它会生成一个后缀名为 .css.map 的文件。

//编译取消调试map
sass input.scss output.css --no-source-map

# 默认 sass input.scss output.css --source-map

sourcemap：构建处理前的代码和处理后的代码之间的桥梁，生成的是 .map 文件，通过它可以定位到源码信息。对于js，还可以借此实现断点调试！

--source-map-urls链接到Sass

--source-map-urls 控制 source maps 如何将 Sass 生成的 css 链接回 Sass 文件！

目前支持两种类型链接：relative（默认值）和absolute（file:// 协议的绝对路径链接）。

它对应的是 生成的.css.map文件中的 sources 键对应的值。

​# 生成 "../sass/styletest.scss".
> sass --source-map-urls=relative styletest.scss styletest.css

# "file:///D:/sass/styletest.scss".
> sass --source-map-urls=absolute styletest.scss styletest.css

Live Sass Compiler VSCode扩展插件

可以在浏览器中实时重新加载，将SASS/SCSS文件编译/转换为CSS文件。

  1. 安装Live Sass Compiler扩展。

  2. 实时编译和打包

    Press F1 or ctrl+shift+P and type Live Sass: Watch Sass to start live compilation or, type Live Sass: Stop Watching Sass to stop a live compilation.

    Press F1 or ctrl+shift+P and type Live Sass: Compile Sass - Without Watch Mode to compile Sass or Scss for one time.

    Click to Watch Sass from Statusbar to turn on the live compilation and then click to Stop Watching Sass from Statusbar to turn on live compilation.

感觉总体作用不大，还是结合webpack等工具，实时更新页面内容时，实时编译scss，而不需要单独使用该工具。

各种语言下的编译

结合所用语言对 LibSass 的包装实现的用法，不再具体细述。

关于Less

在介绍Scss时，不可避免的就会谈论到Less，关于两者的优劣，个人认为本质上没有任何区别，主要还是看个人喜好。

因为两者对于“预处理器”所具有的所有功能都支持，两者大同小异，而关于Less环境和使用相对简单（不需要ruby环境），也构不成绝对优势（对于编程来说，这个应该不是什么难题😐），并且Scss完全兼容css也使得使用很方便，Sass功能强大一些，自然在使用上也就复杂一些，而关于编译的速度差别，基本都是可以忽略的。

关于两者的对比，推荐参考 Sass和less的区别是什么？用哪个好 看看两者的不同。

附：关于使用--watch监听报错 GBK UTF-8 的问题

正常监听后返回如下提示，或无返回：

sass --watch firstsass.scss outputfirstsass.css
>>> Sass is watching for changes. Press Ctrl-C to stop.

但如果文件名或所在路径中包含中文，则会报错 (Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8)。

解决办法有多种，如：不要使用中文文件名，去掉路径中的中文；或，在监听的scss文件顶部加入代码：@charset “UTF-8”;

sass文件监听出现UTF-8问题：(Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8)。

解决方法：

  1. 检查文件夹路径是否有中文出现，如果出现则修改文件夹为英文即可。
  2. 在监听scss文件顶部加入代码：@charset “UTF-8”; 即可。
  3. 找到ruby安装路径并修改 engine.rb 文件，加入以下代码(放在所有require之后就可以)： Encoding.default_external = Encoding.find('utf-8');

参考：blog.csdn.net/weixin_4419…

附：Ruby Sass的安装使用

安装Ruby实现的sass，需要提前安装Ruby，然后再通过gem安装Sass和Compass就可以使用了。

下面介绍有兴趣了解下即可，因为已经停止更新维护，没必要细究！

安装Ruby

Ruby官网下载

下载后一步步安装即可，安装过程中请注意勾选Add Ruby executables to your PATH，添加到系统环境变量。

查看是否安装成功：

> ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812) [x64-mingw32]

# gem版本
> gem -v
3.0.3

更换gem源

//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

// 查看当前gem源
> gem sources -l
*** CURRENT SOURCES ***

https://gems.ruby-china.com/

RubyGems 是 Ruby 的一个包管理器，gem是其提供的管理工具命令。

Gem是一个管理Ruby库和程序的标准包，它通过RubyGems（如 rubygems.org/ ）源来查找、安装、升级和卸载软件包。

升级 RubyGems 版本，可以执行 gem update --system。

安装Sass和Compass

通过gem可以很方便地安装基于Ruby的Sass和Compass。

安装最新版本的Sass和Compass：

gem install sass
gem install compass

安装完成后，确认：

> sass -v
Ruby Sass 3.7.4
> compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2020 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

更新sass

gem update sass

参考

及其他一些资料。

avatar
文章
阅读
粉丝