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