常用的scss选择器和scss常用方法

div > p { color: pink; }
div里紧跟着的p；即div里第一个p
 
div p { color: orange; }
div里的所有p；

h2 + p { color: pink; }
 h2后紧跟着的p

div ~ div { color: pink; }
选择所有跟在div后的同层div元素，不管它们之间隔了多少其他元素

lable {
    color: green;
 
    & + input[type="text"] {
        border: 1px solid green;
    }
}

.cla1 {
    &, .cla2, .cla3 {
        width: 100%;
    }
}

.cla1, .cla2, .cla3 {
    width: 100%;
}

.cla1 {
    >.cla2>.cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据本身实际须要）
.cla2 {
    .cla1>&>.cla3 {
        width: 100%;
    }
}

.cla1>.cla2>.cla3 {
    width: 100%;
}

.cla1 { .cla3 {
        width: 100%;
    }
}

//或者是从子类写到父类（根据本身实际须要）
.cla3 {
    .cla1 & {
        width: 100%;
    }
}

.cla1 .cla3 {
    width: 100%;
}

//之前的用法
.cla {
    @at-root #{&}1 {
        width: 100%;
    }
    @at-root #{&}2 {
        width: 100%;
    }
}

//新支持的用法（后面最好不要跟【标签】或【属性】名）
.cla {
    &1 {
        width: 100%;
    }
    &2 {
        width: 100%;
    }
}

.cla1 {
    width: 100%;
}

.cla2 {
    width: 100%;
}

.cla1 {
    border: {
        width: 1px;
        style: soild;
        color: #ffffff;
    }
}

.cla1 {
    border-width: 1px;
    border-style: soild;
    border-color: #ffffff;
}

:root {
    --color: #F00;
}
p {
    color: var(--color);
}

$content: "First content";
// 如果$content之前没定义就使用如下的默认值
$content: "Second content" !default;
#main {
    content: $content;
}

$theme:"blue";
 
.container {
    @if $theme=="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}
 
.container {
    @if $theme !="blue" {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

@for $i from 1 to 3 {
  #loading span:nth-child(#{$i}) {
      width: 20 * ($i - 1) + px;
  }
}

$column:12;
@while $column>0 {
   .col-sm-#{$column} {
      width: $column / 12 * 100%;
   }
    $column:$column - 1;
}

$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
    width: ($width/2); // 使用变量与括号
    width: (#{$width}/2); // 使用 #{} 插值语句将变量包裹，避免运算。
    z-index: round(10)/2; // 使用了函数
    height: (500px/2); // 使用了括号
    margin-left: 5px + 8px/2px; // 使用了+表达式
}

$font-size: 12px;

p {
    font: #{$font-size}/#{$line-height} Arial Helvetica, sans-serif;
}

@import "rounded-corners", "text-shadow";

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

.example {
    color: red;
}

#main {
    @import "example";
}
```最后被编译为
```scss
#main .example {
    color: red;
}

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

// 定义一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
// 使用混入 
.container {
    .block {
        @include block;
    }
}

.btn{
  font-size:14px;
}
.text-center{
  text-align: center;
}
.btn-default{
  @extends .btn;
  @extends .text-center;
  color: red;
}