SASS使用笔记

SASS

SCSS与SASS

• 文件后缀名不同：.sass/.scss
• sass与scss语法区分

/*sass*/
nav
	float:left
	a
		display:inline-block
/*scss*/
nav{
    float:left;
    a{
        display:inline-block;
    }
} 

SASS安装

• 基于ruby安装sass：可参考官网https://www.sass.hk/install/

//安装ruby后，开始安装sass
gem install sass

//使用
//SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
//下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss

//如果要将显示结果保存成文件，后面再跟一个.css文件名
sass test.scss test.css

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

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

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

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

• compressed：压缩后的css代码。

编译命令如下：sass --style compressed test.sass test.css

监听文件命令如下：sass --watch input.scss:output.css

监听目录命令如下：sass --watch app/sass:public/stylesheets

• 基于node安装sass