sass基础用法

一、安装

SASS是Ruby语言写的，必须先安装Ruby，然后再安装SASS。ruby安装地址：rubyinstaller.org/downloads/ 安装完后可以执行以下命令查看是否安装成功：

ruby -v
复制代码

如下显示则为安装成功：

接下来安装sass:

gem install sass
复制代码

你就会发现当前文件夹多了一个文件夹，然后可以开始使用啦。

二、使用

接下来创建一个项目文件夹，

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

#index.css:

$font-zise:14px;
$color:#F90;
.box{
	background:$color;
}
 compress
复制代码

下面的命令，可以在屏幕上显示.scss文件转化的css代码。

sass sass/index.scss
复制代码

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

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

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

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

  * compressed：压缩后的css代码。

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

    sass --style compressed sass/index.scss css/index.css
复制代码

然后就会发现在我刚创建的css文件夹里多了个index.css

接下来在index引入index.css文件就好啦~