sass基础篇

1、为啥 scss/less 要支持嵌套语法
2、什么时候需要嵌套语法

sass 重要语法

一 #{}

二 $变量

变量类型：数字，boolen，字符串（有引号，无引号），数组，对象

三 @each 变量数组或者对象

1.便利数组

$list: (1, wuhan), (2, chengdu), (3, shanghai), (4, north-america); //图片名称
@each $index, $city in $list {
      .item:nth-of-type(#{$index}) {
        background: url('../../../assets/image/#{$city}-pc.png')
          no-repeat
          right;
        background-size: cover;
      }
    }

2，遍历对象

//可通过map_get()函数取对象内部数据
$list: （pic1:(value:1,url:1),pic2:(value:2,url:2)）; //图片名称
@each $label, $value in $list {
     .#{$label} {
        background: url(map_get($value,url))
          no-repeat
          right;
        background-size: cover;
      }
    }

四.@mixin 和@include

作用：代码归类，减少重复代码
为什么要使用@mixin 减少使用@extend

五 @if @else if @else

注意，这儿只能使用 == 没有 ===

$is = true;
.content {
    @if $is == true {
        display:block;
    }
    @else {
        display:none;
    }

    width:100%;
    height:500px;
}