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文件中也有 */

本章 完 。