SCSS（SASS）环境搭建 - 【Mac 系统】

优质

小牛编辑

132浏览

2023-12-01

一、安装SASS

CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
SASS（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。
SCSS 是 SASS 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
- 1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
- 1. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

简单来讲：

SASS是CSS的“预处理器（软件）“
SCSS是SASS的语法升级版

1.1、验证Ruby是否安装成功

SASS是用Ruby语言写的，需要先安装Ruby，然后再安装SASS

mac或linux上本身已经有ruby，直接查看版本号即可

$ ruby -v
或者
$ ruby --version

结果：

ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]

1.2、安装SASS

安装命令

$ sudo gem install -n /usr/local/bin sass

结果：

Password:    <!此处需要root密码>
Fetching sass-listen-4.0.0.gem
Fetching ffi-1.13.1.gem
Fetching sass-3.7.4.gem
Fetching rb-inotify-0.10.1.gem
Fetching rb-fsevent-0.10.4.gem
Building native extensions. This could take a while...
Successfully installed ffi-1.13.1
Successfully installed rb-inotify-0.10.1
Successfully installed rb-fsevent-0.10.4
Successfully installed sass-listen-4.0.0

Ruby Sass has reached end-of-life and should no longer be used.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  https://sass-lang.com/blog/posts/7828841

Successfully installed sass-3.7.4
Parsing documentation for ffi-1.13.1
Installing ri documentation for ffi-1.13.1
Parsing documentation for rb-inotify-0.10.1
Installing ri documentation for rb-inotify-0.10.1
Parsing documentation for rb-fsevent-0.10.4
Installing ri documentation for rb-fsevent-0.10.4
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Parsing documentation for sass-3.7.4
Installing ri documentation for sass-3.7.4
Done installing documentation for ffi, rb-inotify, rb-fsevent, sass-listen, sass after 21 seconds
5 gems installed

1.3、安装过程中常见问题

1.3.1、无执行权限

$ gem install sass

错误结果

ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

1.3.2、无写入权限

$ sudo gem install sass

错误结果

ERROR: While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

1.4、验证安装结果

$ sass -v
Ruby Sass 3.7.4

$ scss -v
Ruby Sass 3.7.4

由此可见，安装了SASS 3.7.4 版本，就带有SCSS语法版本

如果scss -v报错可以尝试一下命令单独安装scss

sudo gem install -n /usr/local/bin scss

结果：

Password:    <!此处需要root密码>
Fetching scss-1.0.2.gem

NOTE: The gem is called "sass", not "scss"! Get rid of the "scss" gem and try again.

Successfully installed scss-1.0.2
Parsing documentation for scss-1.0.2
Installing ri documentation for scss-1.0.2
Done installing documentation for scss after 0 seconds
1 gem installed

1.5、查看SCSS安装路径

获取SCSS安装路径以便在各类IDE中设置SCSS自动编译

$ which sass
/usr/local/bin/sass

$ which scss
/usr/local/bin/scss

1.6、版本更新

$ sudo gem update sass

二、VSCode配置SCSS自动编译

1.vscode=》扩展=》添加Live Sass Compiler插件 2.设置=》搜索livesass 如图所示：

3.点进去进行编辑：

 "liveSassCompile.settings.formats":[
        // 扩展
        {
            // "format": " ",//可定制的出口CSS样式（expanded，compact，compressed，nested）
            "extensionName": ".min.css",//编译后缀名
            "savePath": "~/../css/"//编译保存的路径
        } 

    ],

    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
     ]

如图所示：

4.重启vscode，在scss文件下，状态栏底部有个watch sass

5.点击 watch sass就可以监听到scss文件变化，保持后，按照步骤3配置的路径生产对应得css文件