scss在專案中使用方便，簡潔~

1.定義變數

$color:red;
.box{
        background-color:$color;        
}

2.巢狀css

#content{
    div{
        aside{
            background-color: red;
        }
        h1{
            color: green;
        }
    }
}

3.父選擇器識別符號

#content{
    div{
        aside{
            background-color: red;
        }
        a{
            color: red;
            &:hover{
                color: blue;
            }
        }

    }
}

4.巢狀屬性

nav{
    border{
        width:1px;
        style:solid;
        color:red;
    }
}

5.混合

   先定義要混合的樣式：@mixin

@mixin corners{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}

  使用：@include

div{
    width: 200px;
    height: 100px;
    @include corners;
}

6.繼承

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

7.函式的使用

$fontSize:37.5;
@function px3rem($px){
       @return  ($px/$fontSize) +rem ;
}

8.控制指令

if

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

9.匯入檔案

@import 'reset';

10.註釋

body {
  color: #333; // 這種註釋內容不會出現在生成的css檔案中
  padding: 0; /* 這種註釋內容會出現在生成的css檔案中 */
}

　以上為sass的基礎語法，詳細內容請參考https://www.sass.hk/網站。