关于Sass的学习~

自学的Sass，清内存,把自己学习时用的文档保存一下~

1 、 Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器, 避免了重复输入父选择器。

#main {p,div{color: blue;width: 100%;}.redbox {width: 100%;height: 50px;border: 1px soild red;background-color: #ff0000;}}

/* 编译后： */#main p,#main div{color: blue;width: 100%;}#main .redbox {width: 100%;height: 50px;border: 1px soild red;background-color: #ff0000;}

2、当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器,如果没有父选择器，则＆的值为空,因此可以在mixin中使用它来检测是否存在父选择器。

如果含有多层嵌套，最外层的父选择器会一层一层向下传递,若& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。

当父选择器含有不合适的后缀时，Sass 将会报错。

    /* 编译前：*/a {font-weight: bold;text-decoration: none;&:hover {text-decoration: underline;color: yellow;}body.main & {font-weight: normal;}}#one {a {font-weight: bold;&:hover {color: red;}}&-two {color: blue;}}

 /* 编译后： */a {font-weight: bold;text-decoration: none;}a:hover {text-decoration: underline;color: yellow;}body.main a {font-weight: normal;}#one a {font-weight: bold;}#one a:hover {color: red;}#one-two {color: blue;}

3、Sass 允许将属性嵌套在命名空间中,命名空间也可以包含自己的属性值。

比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。

.main{font:20px/24px {family: fantasy;size: 30em;weight: bold;}
}

4、占位符选择器 %，必须通过 @extend 指令调用。

@extend让你能够在多个选择器中通过继承的方式共享一段样式。

/* 编译前：*/
.main {%abstract {color: red;}.main-element {@extend %abstract;}
}

/* 编译后： */
.main .main-element {color: red;}

5、多行注释会被完整输出到编译后的 CSS 文件中

单行注释，编译后不会显示在css文件中

将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息

多行注释也可以输出变量值,但一般用不上


如：$version: "1.2.3";/* This CSS is generated by My Snazzy Framework version #{$version}. */


编译为：/* This CSS is generated by My Snazzy Framework version 1.2.3. */

6、变量 $:以美元符号开头，赋值方法与 CSS 属性的写法一样

直接使用即调用变量

嵌套规则内定义的变量只能在嵌套规则内使用（局部变量）

将局部变量转换为全局变量可以添加 !global 声明

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>/* 编译前 *//* #main {$color: red !global;color: $color;}#sidebar {color: $color;} *//* 编译后 */#main {color: red;}#sidebar {color: red;}</style></head><body><p id="main">1234</p><p id="sidebar">5678</p></body>
</html>

7、数据类型：数字、字符串、颜色、布尔型、空值、数组（空格或逗号作分隔符）、maps（相当于JS的object）

7·1 字符串，分有引号字符串和无引号字符串，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名

/*编译前*/
@mixin firefox-message($selector) {body.firefox #{$selector}:before {content: "Hi, Firefox users!";}
}
@include firefox-message(".header");

/*编译后*/
body.firefox .header:before {content: "Hi, Firefox users!";
}

7·2 数组

nth 函数可以直接访问数组中的某一项；
append 函数可以在数组中添加新值；
@each 指令能够遍历数组中的每一项。
数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。
用 () 表示不包含任何值的空数组，不可以直接编译成 CSS。如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

8、运算

SassScript 支持布尔型的 and、or 以及 not 运算。
数组不支持任何运算方式，只能使用 list functions 控制。

8·1 数字运算：SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

p {width: 1in + 8pt;}

/*编译后*/
p {width: 1.111in; }

以下三种情况 / 将被视为除法运算符号：
值，或者值的一部分，是变量或者函数的返回值
值被圆括号包裹
值是算数表达式的一部分

p {font: 10px/8px;             // 纯CSS，无分割$width: 1000px;width: $width/2;            // 使用变量width: round(1.5)/2;        // 使用函数height: (500px/2);          // 值被圆括号包裹margin-left: 5px + 8px/2px; // 值是算数表达式的一部分
}

/*编译后*/
p {font: 10px/8px;width: 500px;height: 250px;margin-left: 9px; }

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用#{}插值语句将变量包裹。

p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}

/*编译后*/
p {font: 12px/30px; }

8·2 颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值.

数字与颜色值之间也可以进行算数运算，，同样也是分段计算的。

如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

/*编译前*/
p {
/*计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09*/
color: #010203 + #040506;
/*计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06*/
color: #010203 * 2;
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

/*编译为*/
p {color: #050709;
color: #020406;
color: rgba(255, 255, 0, 0.75);
}

8·3 字符串运算，+ 可用于连接字符串

如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
在有引号的文本字符串中使用#{}插值语句可以添加动态的值

p:before {content: "I ate #{5 + 10} pies!";
}

/*编译为：*/
p:before {content: "I ate 15 pies!"; }

9、插值语句 #{}

通过#{}插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}

/*编译为*/
p.foo {border-color: blue; }

10、变量定义 !default

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

$content-one: null;
$content-one: "Non-null content" !default;
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {content-one: $content-one;content: $content;new-content: $new_content;
}

/*编译为*/
#main {content-one: "Non-null content";content: "First content";new-content: "First time reference";
}

11、通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css；
文件名以 http://开头；
文件名是 url()；
@import 包含 media queries。

/*导入的语句*/
@import "foo.scss";
/*或*/
@import "foo";
/*Sass 允许同时导入多个文件*/
@import "rounded-corners", "text-shadow";

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

/*编译为*/
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

@import 可以嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

12、Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。

.sidebar {width: 300px;@media screen and (orientation: landscape) {width: 500px;}
}

/*编译为*/
.sidebar {width: 300px;
}
@media screen and (orientation: landscape) {.sidebar {width: 500px; }
}

@media可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;@media #{$media} and ($feature: $value) {.sidebar {width: 500px;}
}


/*编译为*/
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {.sidebar {width: 500px; } }

13、使用 @extend将一个选择器下的所有样式继承给另一个选择器。

.error {background-color: #fdd;
}
.seriousError {@extend .error;font-size:50px;
}

上面代码的意思是将.error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式，这样，使用 .seriousError 的地方可以不再使用 .error,其他使用到 .error 的样式也会同样继承给 .seriousError。

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器

.error {border: 1px #f00;background-color: #fdd;
}
.attention {font-size: 3em;background-color: #ff0;
}
.seriousError {@extend .error;@extend .attention;border-width: 3px;
}

.seriousError将包含.error与 .attention下的所有样式，后定义的样式享有优先权：.seriousError 的背景颜色是 #ff0 而不是 #fdd，因为 .attention 在 .error 之后定义。
多重延伸可以使用逗号分隔选择器名，比如 @extend .error, .attention; 与 @extend .error; @extend.attention 有相同的效果。

当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个

.error {background-color: #fdd;
}
.aaa {@extend .error;font-size:50px;
}
.bbb {@extend .aaa;position: fixed;top: 10%;bottom: 10%;left: 10%;right: 10%;
}

14、当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码

$type: monster;
p {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}

p {color: green; }

15、@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动

这个指令包含两种格式：
1、@for $var from <start> through <end>
2、@for $var from <start> to <end>
区别在于：使用 through 时，条件范围包含 <start> 与 <end> 的值
使用 to 时条件范围只包含 <start>的值不包含<end>的值。
另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}

.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }

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

$i: 3;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 1;
}

/*编译为*/
.item-3 {width: 6em; }.item-2 {width: 4em; }.item-1 {width: 2em; }

16、@each 将变量 $var 作用于值列表中的每一个项目,格式是 $var in 值列表。

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');}
}

/*编译为*/
.puma-icon {background-image: url('/images/puma.png'); }
.sea-slug-icon {background-image: url('/images/sea-slug.png'); }
.egret-icon {background-image: url('/images/egret.png'); }
.salamander-icon {background-image: url('/images/salamander.png'); }

17、混合指令的用法是在 @mixin 后添加名称与样式

@mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;
}
/*引用混合样式,是在@include后添加混合名称*/
.page-title {@include large-text;padding: 4px;margin-top: 10px;
}

/*编译为*/
large-text {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;
}
.page-title {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px; }

注：混合样式中也可以包含其他混合样式，混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。
混合指令也可设置参数，引用指令时，按照参数的顺序，再将所赋的值对应写进括号

/*混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值，例如，这里的$style:dashed*/
@mixin sexy-border($color, $width,$style:dashed) {border: {color: $color;width: $width;style: $style;}
}
p { @include sexy-border(blue, 1px); }

/*编译为*/
p {border-color: blue;border-width: 1px;border-style: dashed; }

18、Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用

$one-width: 40px;
$two-width: 10px;@function three-width($n) {@return $n * $one-width + ($n - 1) * $two-width;
}#sidebar { width: three-width(5); }

/*编译为*/
#sidebar {width: 240px; }