SCSS-使用方法

嵌套选择器

<!-- HTML -->

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

//comment：scss

.box{
  border:1px solid red;
  >ul{
    background: blue;
    > li{color:white;}
  }
} 

/* css */

.box{border:1px solid red;} 
.box ul{background: blue;}
.box ul li{color:white;}

变量

//comment：scss

$borderColor:red;
$borderWidth:1px;
// $kong:$borderWidth;   不同的变量 是同一个值

.box{
  border:$borderWidth solid $borderColor;
  >ul{
    background: blue;
    > li{color:white;}
  }
}

mixin 用法

//comment：scss

@mixin border-style{border:1px solid red;}
.box{
  @include border-style;
  >ul{
    background: blue;
    > li{color:white;}
  }
}

接收参数 并且有默认值

//comment：scss

@mixin border-style($border-color:red){ // 像 js 一样可以接收参数
  border:1px solid $border-color;
}
.box{
  @include border-style; // 什么都不传默认为红色
  >ul{
    background: blue;
    > li{@include border-style(green); // 什么都传了绿色 就为绿色
    }
  }
}

注释写法

//comment：该注释只是在.scss 源文件中有，编译后的 css 文件中没有

/* comment：编译后的 css 文件中也有 */

---

本章 完。

---