SCSS

層級嵌套
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }//&代表只作用于父類 a
  }
}

在下例中，你可以用同層相鄰組合選擇器+選擇header元素后緊跟的p元素：
header + p { font-size: 1.1em }

你也可以用同層全體組合選擇器~，選擇所有跟在article后的同層article元素，不管它們之間隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }

嵌套屬性;
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

變量 
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

和!important相反   !default用于變量并且 是默認值 而不是唯一不變值
$fancybox-width: 400px !default;

@minxin 混合器  @include 導入
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
可以傳參數
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}

通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

flex

flex-direction  
row（默認值）：主軸為水平方向，起點在左端
row-reverse:主軸為水平方向，起點在右端
column:主軸為垂直方向，起點在上沿
column-reverse:主軸為垂直方向，起點在下沿
flex-wrap      nowrap（默認）：不換行     wrap:換行，第一行在上方     wrap-reverse:換行，在第一行的下方
flex-flow     flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認 row nowrap
justify-content   屬性定義了項目在主軸上的對齊方式
flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between:兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
align-items  屬性定義項目在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
align-content 屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
項目的屬性
order       order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0.
flex-grow   flex-grow屬性定義項目的放大比例，默認值為0，即如果存在剩余空間，也不放大。
flex-shrink flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，改項目將縮小。
flex-basis  flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
flex        flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto。后面兩個屬性可選
align-self  align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，等同于stretch。