Sass 的安装及命令行使用

时间:2022-04-13 17:42:54
使用 brew install ruby
安装 ruby
在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。 
 
通过检查版本测试是否存在ruby:ruby -v
 
使用 gem install sass
安装 sass
通过检查版本测试是否存在sass:sass -v
 
安装时网络强制导致命令行安装 sass 失败
下载 sass 至本地,使用 gem install,加上 sass 本地路径安装即可
gem install 本地 sass 文件地址
 
编译:sass test.scss test.css

SASS提供四个编译风格的选项:

  * nested:嵌套缩进的css代码,它是默认值。

  * expanded:没有缩进的、扩展的css代码。

  * compact:简洁格式的css代码。

  * compressed:压缩后的css代码。

 

生产环境当中,一般使用最后一个选项。

  sass --style compressed test.sass test.css

 

你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

  // watch a file

  sass --watch input.scss:output.css

  // watch a directory

  sass --watch app/sass:public/stylesheets

 

最常用命令:sass --watch 当前 .scss 文件路径或者文件夹路径:当前 .css 文件路径或者文件夹路径

淘宝 RubyGems 镜像安装 Sass

除了下载 Sass 安装包到本地安装之外,碰到网络原因无法安装时还可以使用淘宝 RubyGems 镜像安装 Sass。只是我们需要通过 gem sources 命令来配置源,先移除默认的 https://rubygems.org 源,然后添加淘宝的源 https://ruby.taobao.org:

第一步:移动默认的源

gem sources --remove https://rubygems.org/

第二步:指定淘宝的源

gem sources -a https://ruby.taobao.org/

第三步:查看指定的源是不是淘宝源

gem sources -l

返回结果如下:

*** CURRENT SOURCES ***
https://ruby.taobao.org

请确保只有 ruby.taobao.org。如果无误之后,执行下面的命令:

gem install sass