「黑马程序员」「成都校区」CSS预处理器之sass的用法

一、什么是SASS

Sass 是一款强化CSS 的辅助工具，它在CSS 语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports) 等高级功能，这些拓展令CSS 更加强大与优雅。使用Sass 以及Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、安装Sass和Compass2.1 安装sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

但是两者的语法没有关系。不懂Ruby，照样使用。

假定你已经安装好了Ruby，Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

[JavaScript] 纯文本查看复制代码

// 安装如下(如mac安装遇到权限问题需加sudo gem install sass)

gem install sass

gem install compass

然后，就可以使用了。

2.2 编译Sasssass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为input.scss。）

[JavaScript] 纯文本查看复制代码

// 单文件转换命令

sass input.scss output.css

命令行编译配置选项: 命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style、--sourcemap

[JavaScript] 纯文本查看复制代码

?

//编译格式

sass --watch input.scss:output.css --style compact

//编译添加调试map

sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map

sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息

sass --watch input.scss:output.css --debug-info

• --style表示解析后的css是什么排版格式;
• --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

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

• nested：嵌套缩进的css代码，它是默认值。
• expanded：没有缩进的、扩展的css代码。
• compact：简洁格式的css代码。
• compressed：压缩后的css代码。

四种编译排版演示:

[CSS] 纯文本查看复制代码

//未编译样式

.box {

width: 300px;

height: 400px;

&-title {

height: 30px;

line-height: 30px;

}

}

nested 编译排版格式

[CSS] 纯文本查看复制代码

/*命令行内容*/

sass style.scss:style.css --style nested

/*编译过后样式*/

.box {

width: 300px;

height: 400px; }

.box-title {

height: 30px;

line-height: 30px; }

expanded 编译排版格式

[CSS] 纯文本查看复制代码

/*命令行内容*/

sass style.scss:style.css --style expanded

/*编译过后样式*/

.box {

width: 300px;

height: 400px;

}

.box-title {

height: 30px;

line-height: 30px;

}

compact 编译排版格式

[CSS] 纯文本查看复制代码

/*命令行内容*/

sass style.scss:style.css --style compact

/*编译过后样式*/

.box { width: 300px; height: 400px; }

.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

[CSS] 纯文本查看复制代码

/*命令行内容*/

sass style.scss:style.css --style compressed

/*编译过后样式*/

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

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

[JavaScript] 纯文本查看复制代码

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

[JavaScript] 纯文本查看复制代码

//单文件监听命令

sass --watch input.scss:output.cs

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：

sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子也可以去（Sass中文文档）试试。

三、基本用法3.1变量sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css语法冲突。

sass变量的声明和css属性的声明很像：

[CSS] 纯文本查看复制代码

$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。

[CSS] 纯文本查看复制代码

$color : #1875e7;?

div {

color : $color;

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

[CSS] 纯文本查看复制代码

$side : left;

.rounded {

border-#{$side}-radius: 5px;

}

3.2 计算

[CSS] 纯文本查看复制代码

?

1$var: 10px;

div {

margin: (28px/2);

position: absolute;

top: 30px+ 20px;

left: $var + 20px;

}

3.3 嵌套CSS 规则

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

[CSS] 纯文本查看复制代码

#content {

article {

h1 { color: #333}

p { margin-bottom: 1.4em }

aside { background-color: #EEE}

[CSS] 纯文本查看复制代码

/* 编译后 */

#content article h1{ color: #333 };

#content article p { margin-bottom: 1.4em };

#content aside { background-color: #EEE};

属性也可以嵌套，比如border-color属性，可以写成：

[CSS] 纯文本查看复制代码

border: {

color: blue

注意，border后面必须加上冒号。

在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方。

[CSS] 纯文本查看复制代码

article a {

color: blue;

&:hover { color: red }

在为父级选择器添加:hover等伪类时，这种方式非常有用。同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

[CSS] 纯文本查看复制代码

#content aside {

color: red;

body.ie & { color: green }

3.4 静默注释css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript、Java等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

[CSS] 纯文本查看复制代码

body {

color: #333; // 这种注释内容不会出现在生成的css文件中

padding: 0; /* 这种注释内容会出现在生成的css文件中*/

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

[CSS] 纯文本查看复制代码

body {

color /* 这块注释内容不会出现在生成的css中*/: #333;

padding: /* 这块注释内容也不会出现在生成的css中 */ 0;