sass学习笔记：sass在windows下的安装编译

Posted 2020-08-07

一、sass在windows下的安装

在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，可以在这里下载:

https://www.ruby-lang.org/en/downloads/

Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。

Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板Start Command Prompt with Ruby。接下来就可以安装 Sass 了。

1、通过命令安装 Sass

打开电脑的命令终端，输入下面的命令：

gem install sass

提醒一下，在使用 Mac 的同学，可能需要在上面的命令前加上"sudo"，才能正常安装：

sudo gem install sass

如果上面的方法没有安装成功，可以使用下面的两种方法。

   2、通过 Compass 来安装 Sass

除了使用 gem 命令来安装 Sass 之外，还可以通过安装 compass来安装 Sass，因为 Compass 是基于 Sass 开发的一个框架。也就是说，你安装了 Compass，也就同时安装好了 Sass。

同样的在你的命令终端输入下面的命令：

sudo gem install sass

执行完上面的命令之后，就开始安装 Compass 和 Sass。

注：Compass 是一个成熟的、基于 Sass 开发的一个框架，这里面集成了很多写好的 mixins 和 Sass 函数。不过在此暂不做过多阐述。

   3、本地安装 Sass

由于有时候直接使用上面的命令安装会让你无法正常实现安装（网络受限原因），当碰到这种情况之时，那么安装需要特殊去处理，可以通过下面的方法来实现 Sass 的正常安装：

可以到 Rubygems(http://rubygems.org/) 网站上将 Sass 的安装包（http://rubygems.org/gems/sass）下载下来，然后在命令终端输入：

gem install <把下载的安装包拖到这里>

直接回车即可安装成功。

注：在 iosX 系统平台，可以直接将下载的安装包拖到 "gem install" 后面，如果在是 Windows 系统，需要手功输入安装的文件路径。

二、sass在的查测、更新、卸载

在命令行Start Command Prompt with Ruby中，输入命令：

sass -v                  查测

gem update sass         更新sass

gem uninstall sass         卸载sass

scss是sass的新语法格式，可缩进，可以带大括号、分号，与sass不同的是书写格式和文件扩展名不同。

三、sass的编译

1、命令行编译：

单文件编译：     sass   <输入路径>/style.scss:<输出路径>/style.css

多文件编译：     sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

命令行中watch功能:

来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令终端就能监测，并重新编译出文件。

2、GUI界面工具编译

推荐Koala、Codekit这两个可视化工具编译，具体可网上下载。

3、自动化编译

Grunt、Gulp能自动编译。