Sass基础学习

一、变量定义及使用

sass中，使用$符号定义变量，定义变量的格式为：

$name:value;
复制代码

sass中的变量定义之后，后面就可以直接使用了：

$color:#fff;
div{
    color:$color;
}
复制代码

可以使用sass在线网站看到编译后的css输出：

二、全局变量与局部变量

全局变量是指定义在元素块之外的变量，通过一个例子来看一下：

$color:red; // 全局变量定义
div{
   color:$color; // 使用全局变量
   a {
       $color:green; // 局部变量定义
       color:$color; // 使用局部变量
   }
}
复制代码

这里全局变量和局部变量的概念和JS的表现是一致的，应该比较和理解。

三、混合宏 mixin

对于统一的css数值，可以通过定义变量实现全局统一。对于统一的css代码片段，可以使用混合宏实现复用，并且混合宏还支持传入参数，实现更灵活的复用。

3.1 混合宏的声明与调用

混合宏通过@mixin关键字进行声明

// 定义一个mixin，名称是link
@mixin link {
    color:blue;
    cursor:pointer;
    text-decoration: none;
    &:hover{
            text-decoration: underline;
    }
}

a{
    // 调用mixin link
    @include link;
}
复制代码

我们看一下编译结果：

3.2 带参数的混合宏

混合宏定义时可以设置接收的参数变量，并为参数变量提供默认值；相应地，在调用时可以传递参数值

// 定义混合宏link，接收2个参数，$fontSize和$color，都具有默认值
@mixin link($fontsize:14px,$color:blue) {
    font-size:$fontsize;
    color:$color;
    cursor:pointer;
    text-decoration: none;
    &:hover{
            text-decoration: underline;
    }
}

a{
    // 调用mixin link，并传入参数值
    @include link(12px,red);
}
复制代码

编译结果：

3.3 复杂的混合宏

还可以在混合宏定义中使用逻辑判断等指令

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}
复制代码

3.4 向混合样式中导入内容

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方：

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  marign:0;
}
复制代码

四、扩展/继承 extend

选择器继承是指一个选择器可以通过继承的方式将另外一个选择器所有的样式都包括进来，如：

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  // 通过@extend关键字，继承.error选择器的所有样式
  @extend .error;
  border-width: 3px;
}
复制代码

编译后：

那么@extend和@mixin都有代码块复用的功能，他们的区别在于：
1、@extend可以直接复用其他选择器的样式，无需像@mixin一样进行独立声明；
2、继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。

五、占位符 %

scss中额外提供了一种特殊的选择器：占位符选择器。在写法上，与标签/类选择器一致；但是占位符选择器必须搭配@extend一起使用。

混合宏 vs 继承 vs 占位符

借用慕课网上的一张图

六、插值语句 #{}

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

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
复制代码

编译结果

七、运算

在css中，仅支持通过calc函数进行运算，在sass中，可以进行各种数学运算

7.1 加法/减法/乘法

在变量或属性中都可以使用加、减、乘法运算

$width1:10px;
$width2:20px;
$totalwidth:$width1 + $width2;

div{
    width:$totalwidth+10px;
    height:20px+30px;
}
复制代码

7.2 除法

除法单独讲是因为/符号在css中本身已经作为一种符号使用，因此在sass中使用除法时需要注意使用场景。
以下场景中，/作为除法使用

7.2.1 使用()包裹数值

$width:20px;

div{
    width:($width / 2);
}
复制代码

7.2.2 值或值的一部分是变量或者函数的返回值

$width:20px;
div {
  width: $width / 2; // 值中含有变量，是除法运算           
  height: round(1.5) / 2;  // 值中含有函数返回值，是除法运算
}
复制代码

7.2.3 值是算术表达式的一部分

div {
  margin-left: 5px + 8px/2;
}
复制代码

八、条件控制

sass提供了基础的条件控制指令

8.1 @if

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

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
复制代码

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

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

8.2 @for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
这个指令包含两种格式：@for $var from <start> through <end>，或者 @for$var from to .
区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。
和 必须是整数值。

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

8.3 @each

@each 指令的格式是 $var in <list>，<list> 是一连串的值，也就是值列表。 @each 将变量$var 作用于值列表中的每一个项目，然后输出结果

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

@each还可以使用多重赋值，即多个值变量分别对应多个列表:

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
复制代码

8.4 @while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
复制代码