SASS基本特性

一、变量

1.1 声明变量

Sass 的变量包括三个部分：

1. 声明变量的符号“$”
2. 变量名称
3. 赋予变量的值

 

来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量：

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

如果值后面加上!default则表示默认值。

1.2 普通变量和默认变量

1）普通变量

定义之后可以在全局范围内使用。

$fontSize: 12px;
body{
   
    font-size:$fontSize;
}

 编译后的css代码：

body{
   
    font-size:12px;
}

 

2）默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

$baseLineHeight:1.5 !default;
body{
   
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
   
    line-height:1.5;
}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
   
    line-height: $baseLineHeight; 
}

 编译后的css代码：

body{
   
    line-height:2;
}

 可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

 1.3 变量的调用

在 Sass 中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也非常的简单。

比如在定义了变量

$width:#fff;
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color: $width !default; // 变量之间的相互调用
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

 在按钮 button 中调用，可以按下面的方式调用

.btn-primary {
   
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}

 编译出来的CSS:

.btn-primary {
   
  background-color: #337ab7;
  color: #fff;
  border: 1px solid #2e6da4;
}

1.4 局部变量和全局变量

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

css 的结果：

.block {
   
  color: orange;
}
em a {
   
  color: red;
}
span {
   
  color: orange;
}

上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。

全局变量的影子

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。

什么时候声明变量

创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：

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

基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。

二、嵌套

选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：

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

2.1 选择器嵌套

<header>
    <nav>
        <a hr