[实习笔记]强大的stylus！

[sunshinelover]

百闻不如一用。 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)。

[deligent-ant]

用for in循环，这边值得夸奖的是它的简便写法，循环1～10可以直接写成1..10(包含边界，即包含10)，1...10(不包含边界，不包含10)。很好奇为啥 多一个点 反而少一个边界， 反思维啊 不顾挺好用 让我想起 了Array.apply(null, { length: 20 }).map