Sass的概念以及命令

概念

Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！Sass让我们更灵活、更方便的书写css样式。Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

命令行编译

单文件转换命令

sass input.scss output.css

单文件监听命令

sass --watch input.scss:output.css

如果sass文件和css文件在同一个文件中，监听多个sass文件

sass --watch sass:css

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

sass --watch app/sass:public/stylesheets

--style表示解析后的css是什么排版格式;
sass内置有四种编译格式:

nested 嵌套型（默认格式）

sass --watch sass:css --style nested

expanded 扩展型

sass --watch sass:css --style expanded

compact 紧凑型

sass --watch sass:css --style compact

compressed 压缩型

sass --watch sass:css --style compressed

特色功能 (Features)

完全兼容 CSS3
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式

变量 `$` (Variables: `$`)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会，

嵌套

@import引入其他文件

@if

@if 1<2{

} @else if{

}@else{

}

@for

@for $i from 1 through $columns{ //循环 1到12 包含12

}

@for $i from 1 to 12{ //循环 1到11不包含12

}

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each $i in $list { //$list是要循环的内容 $i是下标

}

@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

@while $i>0 {

.item{

width: 100%/$i;

}

$i: $i - 1;

}

@extend

用于继承后面选择器的属性

@extend .box 可以继承.box的所有属性

混合指令

混合指令的用法是在 @mixin 后添加名称与样式使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示