sass基础用法

208 阅读1分钟

一、安装

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文件就好啦~