sass安装及使用

Posted 2020-09-08

在Mac系统下，Ruby一般已内置在其中，如果您不能确认是否已安装，或者说你不知道你的Ruby使用的版本，你可以打开你的命令工具：

$ ruby -v

安装sass 

在大多数情况和大部分人群中，还是喜欢安装SASS的标准稳定版本，这样使用在项目中风险不会太大，其安装很简单：

$ gem install sass 

有的时候在Linux和OS X系统下，可能需要超级管理员权限才能安装：

$ sudo gem install sass

安装完成后，可以通过下面的命令查看SASS是否安装成功：

$ gem list

如果您在这份list中，看到SASS的存在：

…
sass (3.2.9)
…

说明您已安装成功。这个时候你或能不知道SASS版本是多少，你也可以查看他的版本：

$ sass -v

可以看到SASS版本信息：

Sass 3.2.9 (Media Mark)

Beat版本安装

对于SASS的发烧友来说，一个稳定版本并不能满足需求，他需要一些别的东西，也就是说他想获取SASS的一些最新变化和最新功能。那么这个时候你就可以安装一个Beat版本的SASS，他会自己会自动创建每次更改的主分支：

$ gem install sass --pre

从Git库中安装

SASS也可以直接从Git库中安装：

$ git clone git://github.com/nex3/sass.git
$ cd sass
$ rake install

从实际使用的角度来说，建议按第一种方法安装。Windows系统下安装SASS，可以点击这里。

安装SASS库

使用SASS制作东西时，我们可以借助一些成熟型的SASS库，帮助我们快速开发，提高效率。目前比较成熟的SASS库有Compass和Bourbon。接下来，简单看看这两个库怎么来安装。

安装Compass库

Compass是一个非常成熟的SASS库，可是一个很强大的框架，使用的频率也相当的高。如果您了解了Compass，那么他将会让你受益无穷。同样的，在你的项目中使用Compass，需要先安装Compass。

$ gem install compass

通过上面一行简单的命令你就完成了对Compass的安装，你在gem对应的清单中就能看到compass的存在：

$ gem list

显示结果：

…
compass (0.12.2)
…

安装Bourbon库

Bourbon的盘安装和Compass库的安装非常的类似，也非常简单，只需要通过gem命令在你的命令终端运行下面的命令：

$ gem install bourbon


这样就可以使用sass了

例如：

1. 新建sass 文件夹
新建.scss文件(也可以新建.sass文件，本人比较喜欢.scss的写法)

2. 因为html文件中只能引入.css文件，使用下面命令编译一下
sass sass/style.scss css/style.css

3.index.html中引入sass

<link rel="stylesheet" href="./css/style.css">