前言：
当前我们对“sass怎么用”可能比较重视，看官们都需要剖析一些“sass怎么用”的相关资讯。那么小编在网上网罗了一些有关“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;
