sass

基础篇 一、sass与sCSS的区别 1、文件扩展名不同，sass（.sass），scss（.scss）。 2、语法书写方式不同，sass不带 {} 和；，scss的语法书写和css语法类似。

二、编译命令 1、单文件编译（一次性编译） sass 要编译的sass文件路径/style.scss：要输出css文件路径/style.css 2、多文件编译（一次性编译） sass sass/：css/ 表示将sass文件夹中所有的.scss（.sass）文件编译成 .css文件，并且将这些css文件都放在项目中的css文件夹中。 3.实时编译 sass –watch 要编译的sass文件路径/style.scss：要输出css文件路径/style.css sass –watch 要编译sass文件路径/文件夹名：要输出csss文件路径/css文件夹

三、常见编译错误 1、字符编译引起：sass编译不支持GBK编码，所以创建sass文件时，需要将文件编码设置为utf-8。 2、路径中的中文字符引起：建议文件名或文件目录不要使用中文。

四、输出方式： 1、嵌套输出方式nested sass –watch test.scss:test.css –style nested 2、展开输出方式expanded sass –watch test.scss:test.css –style expanded 3、紧凑输出方式compact sass –watch test.scss:test.css –style compact 4、压缩输出方式comPRessed sass –watch test.scss:test.css –style compressed

五、sass调试 只要浏览器支持sourcemap功能，可在浏览器直接调试sass文件，并能看到sass文件编译。（sass3.3版本以下，需要在编译的时候添加“–sourcemap” 参数： sass –watch –scss –sourcemap style.scss:style.css）。

六、sass基础特性： 1、变量声明：$ 2、默认变量：在变量值后加 !default； 3、覆盖默认变量：在默认变量前重新声明下变量即可。 4、sass嵌套 选择器嵌套：nav { a { color：red； } header & { color：green; } } 属性嵌套：.box { border：{ top：1px solid red; bottom：1px solid green; } } 伪类嵌套：.clearfix{ &:before, &:after { content:”“; display: table; } &:after { clear:both; overflow: hidden; } }

七、混合宏 1、声明混合宏（在 Sass 中，使用“@mixin”来声明一个混合宏） 不带参数混合宏 @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 带参数混合宏 @mixin border-radius(radius:5px)−webkit−border−radius:$radius;border−radius:$radius;复杂的混合宏@mixinbox−shadow($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 复杂的混合宏 @mixin box-shadow($shadow…) { @if length(shadow) >= 1 {      @include prefixer(box-shadow,$shadow) >= 1 { @include prefixer(box-shadow,$shadow); } @else{ shadow:004pxrgba(0,0,0,.3);@includeprefixer(box−shadow,$shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow,$shadow); } } 2、调用混合宏（使用“@include”来调用声明好的混合宏） @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } button { @include border-radius; }

八、扩展/继承 在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。 .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }

.btn-primary { background-color: #f36; color: #fff; @extend .btn; } 九、占位符%placeholder %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码 //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; }

.btn { @extend %mt5; @extend %pt5; } 通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

十、sass插件值 #{} 十一、注释 1、//：在css中不显示 2、/**/：在css中显示 十二、数据类型 1、数字： 1、2、10px 2、字符串：‘foo’ SassScript 支持 CSS 的两种字符串类型： ● 有引号字符串 (quoted strings)，如 “Lucida Grande” 、’http://sass-lang.com‘； ● 无引号字符串 (unquoted strings)，如 sans-serifbold。 在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。

3、颜色：blue 4、布尔值：ture,false; 5、空值：null 6、值列表：用空格或者逗号分开：1.5em 1em 0 2em、Helvetica,Arial,sans-serif。 十三、sass运算 1、乘法、除法运算1个带单位就好，除法运算需要给运算的外面添加一个小括号( )，因为 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错； 2、颜色运算：所有算数运算都支持颜色值，并且是分段运算的 p { color: #010203 + #040506; }

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为： 如此编译出来的 CSS 为： p { color: #050709; } 算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如： p { color: #010203 * 2; } 计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为： p { color: #020406; } 3、字符运算： 在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如： content: “Hello” + “” + “Sass!”;  .box:before {    content: ” #{$content: “Hello” + “” + “Sass!”; .box:before { content: ” #{$content} “; } 编译出来的CSS： .box:before { content: ” Hello Sass! “; } 除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起： div { cursor: e + -resize; } 编译出来的CSS: div { cursor: e-resize; } 注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如： p:before { content: “Foo ” + Bar; font-family: sans- + “serif”; } 编译出来的 CSS： p:before { content: “Foo Bar”; font-family: sans-serif; } 进阶篇 一、网址：http://www.imooc.com/learn/436（慕课网） 1、列表函数 列表函数主要包括一些对列表参数的函数使用，主要包括以下几种： ● length($list)：返回一个列表的长度值； length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错

● nth(list,$list,$n)：返回一个列表中指定的某个标签值 nth() 函数用来指定列表中某个位置的值。不过在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第 二个标签值。注：在 nth(list,$list,$n) 函数中的 $n 必须是大于 0 的整数

● join(list1,$list1,$list2, [separator])：将两个列给连接在一起，变成一个列表；只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错$separator])：将两个列给连接在一起，变成一个列表； 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错$separator：comma/space/auto

● append(list1,$list1,$val, [separator])：将某个值放在列表的最后；●zip($separator])：将某个值放在列表的最后； ● zip($lists…)：将几个列表结合成一个多维的列表； ● index(list,$list,$value)：返回一个值在列表中的位置值。 ● 2、@import 规则 Sass 扩展了 CSS 的@import 规则 ，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。 @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则： ● 如果文件的扩展名是 .css。 ● 如果文件名以 http:// 开头。 ● 如果文件名是 url()。 ● 如果 @import 包含了任何媒体查询（media queries）。 如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。 例如： @import “foo.scss”; 或 @import “foo”; 两者都将引入 foo.scss 文件， 而 @import “foo.css”; @import “foo” screen; @import “http://foo.com/bar“; @import url(foo); 将被编译为： @import “foo.css”; @import “foo” screen; @import “http://foo.com/bar“; @import url(foo); 如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。

3、@at-root @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单的示例： .a { color: red;

.b { color: orange;

} }

4、@debug @debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug: @debug 10em + 12em; 会输出： Line 1 DEBUG: 22em

@error 和 @warn、@debug 功能是如出一辙。