sass学习笔记（三）：sass的变量及嵌套

sass的变量

1、声明变量

$width: 300px;

如上所示，Sass 的变量包括三个部分：声明变量的符号“$”、变量名称、赋予变量的值。

2、普通变量与默认变量

普通变量定义之后可以在全局范围内使用。默认变量仅需要在值后面加上 !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。

3、局部变量与全局变量

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

css 的结果：

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

全局变量就是定义在元素外面的变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。

什么时候声明变量？

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

1.该值至少重复出现了两次；

2.该值至少可能会被更新一次；

3.该值所有的表现都与变量有关（非巧合）。

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

sass的嵌套：

1、选择器嵌套

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

css是这样的：

nav a {
  color:red;
}

header nav a {
  color:green;
}

2、属性嵌套

CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3、伪类嵌套

伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。拿经典的“clearfix”为例：

.clearfix{&:before,&:after {
    content:"";
    display: table;
  }&:after {
    clear:both;
    overflow: hidden;
  }
}

编译出来的 CSS：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免选择器嵌套：

选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。

选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

为了防止此类情况，我们应该尽可能避免选择器嵌套。