強大的stylus！

百聞不如一用。
我今天對stylus的用處有了非常直觀的認識。
Talk is cheap,show you the code.
使用前：

.lottery-sector li:nth-child(1) {
background-color: #fff;
transform: rotate(0deg) skew(54deg);
}

.lottery-sector li:nth-child(2) {
background-color: rgb(254, 246, 225);
transform: rotate(36deg) skew(54deg);
}

.lottery-sector li:nth-child(3) {
background-color: #fff;
transform: rotate(72deg) skew(54deg);
}

.lottery-sector li:nth-child(4) {
background-color: rgb(254, 246, 225);
transform: rotate(108deg) skew(54deg);
}

.lottery-sector li:nth-child(5) {
background-color: #FFF;
transform: rotate(144deg) skew(54deg);
}

.lottery-sector li:nth-child(6) {
background-color: rgb(254, 246, 225);
transform: rotate(180deg) skew(54deg);
}

.lottery-sector li:nth-child(7) {
background-color: #FFF;
transform: rotate(216deg) skew(54deg);
}

.lottery-sector li:nth-child(8) {
background-color: rgb(254, 246, 225);
transform: rotate(252deg) skew(54deg);
}

.lottery-sector li:nth-child(9) {
background-color: #FFF;
transform: rotate(288deg) skew(54deg);
}

.lottery-sector li:nth-child(10) {
background-color: rgb(254, 246, 225);
transform: rotate(324deg) skew(54deg);
}

使用後：

.lottery-sector 
  for row in 1..10 
    li:nth-child({row}) 
      if (row % 2 == 0) 
        background-color: rgb(254, 246, 225);
      else 
        background-color: #fff;
      transform: rotate((row * 36)deg) skew(54deg);

是不是覺得清爽了很多！這裏有用到stylus的幾個語法：插值、嵌套、計算、條件、循環、省略花括號、取一段值的簡便寫法。

• 嵌套

  lottery-sector的子元素li的樣式直接定義在了它裏面

• 插值

  變量文本要作爲內容的一部分，用{}括起來，比如 li:nth-child({row})

• 計算

  比如row * 36，row % 2 == 0

這邊我感覺是我踩的一個坑，不過也應該成爲編寫代碼的習慣，變量和計算符號之間要有空格

• 條件

  if和else語句的使用是允許的

• 循環

  用for in循環，這邊值得誇獎的是它的簡便寫法，循環1～10可以直接寫成1..10(包含邊界，即包含10)，1…10(不包含邊界，不包含10)。