開始了萬惡的鐵人賽了，第二天就滿腦子想要富奸（Ｘ

還是乖乖來寫今天所要講的內容，今天要來講特性屬性的部分

由於我的英文很爛，所以我們先來一段翻譯

下面直接進範例來說明

編譯前
.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size / 2;
}

編譯後
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

這個用法就蠻容易理解，主要是＄size是一個我們宣告變數，透過這樣可以達到複用，上面的範例，使用這變數不是特別多，感覺不出來優勢，直接寫死也不會花很多時間，萬一如果我們有很多組件，組件內容文字顯示區塊可能預設用18px，有需求要修改內容文字大小，如改成16px，這時候透過變數方式管理，這樣情況就會有優勢，組件內文文字都是乖乖有使用這個變數，修改也比較不會改錯地方，如果我們之前沒有用變數方式，利用編輯器去選到我們要修改的值，我們還是必須要去判斷這個值是不是我們要修改的項目，而設定變數就會省去這些麻煩

Interpolation的例子

編譯前
@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

編譯後
.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

官網這範例稍微比較複雜一點，由於我們先不講mixin跟一些each迴圈用法，就先跳過 mixin跟each的用法 ，就是任性，單純使用程式概念來看這一段做的行為， 首先我們設定一段prefix的function，這在一段function透過變數跟屬性，達成程式輸入值進去，產出我們所要的結果

Hidden Declarations的例子

編譯前
$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

編譯後
.button {
  border: 1px solid black;
}

這個範例就很簡單，設定這個rounded-corners變數的值false，一樣是簡單判斷式，給的值是false，所以就不會顯示border-radius這個屬性

mixin和迴圈跟判斷式這些用法，後面天數也會提到這些用法，再來詳細說明這些用法