SCSS(SASS)环境搭建 - 【Mac系统】

一、安装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两个文件扩展名区分开。

  • SCSSSASS 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 如图所示:

image-20210507001655449

3.点进去进行编辑:

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

    ],

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

如图所示:

image-20210507001815914

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

image-20210507001931164

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

results matching ""

    No results matching ""