官方文档

一、嵌套

  1. div{
  2.     h1{
  3.         width:100px;
  4.         height:100px;
  5.         background:yellow;
  6.         //&表示h1
  7.         &:hover{
  8.             background:red;
  9.         }
  10.     }
  11. }
//编译后
div h1 {
  width: 100px;
  height: 100px;
  background: yellow;
}

div h1:hover {
  background: red;
}

二、变量

$bg:red;
$fontSize:12px;

三、mixin

  • 1.使用 @mixin 定义代码块
  • 2.使用 @include 引用代码块
    $bg:red;
@mixin bg($bg){
  background:$bg;
  line-height:40px;
  text-align: center;
}
.nav{
  @include bg(yellow);
}