Sass的的使用三

[Sass]普通变量与默认变量
普通变量
定义之后可以在全局范围内使用。

默认变量
sass 的默认变量仅需要在值后面加上 !default 即可。sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可默认变量的价值在进行组件化开发的时候会非常有用。

//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
　　color: $color;//调用全局变量
}
li {
　　$color: red;//定义局部变量
　　a {
　　　　color: $color;//调用局部变量
　　}
}
span {
　　color: $color;//调用全局变量
}

在元素内部定义的变量不会影响其他元素，全局变量就是定义在元素外面的变量。

创建变量的情况：

该值至少重复出现了两次；
该值至少可能会被更新一次；
该值所有的表现都与变量有关（非巧合）。

Sass 的嵌套分为三种：

选择器嵌套
属性嵌套
伪类嵌套

//定义一个占位符

%mt5 {
　　margin-top: 5px;
}

/*调用一个占位符*/

.box {
　　@extend %mt5;
}

SassScript 支持 CSS 的两种字符串类型：

有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
无引号字符串 (unquoted strings)，如 sans-serifbold。
在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (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!"; }
需要注意的是：当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。