stylus跟less sass做的是同樣的事情，之間有很多共同的地方卢肃，比如變量莫湘、計算的想法
歸納下stylus基礎(chǔ)知識
條件
因為有了條件，才受控制腰池，才可以稱的上是動態(tài)語言演怎；
- if/else if/else
- unless(除非)
styl
box(x,y,margin-only = false)
if margin-only
margin x y
else
padding x y
p
box(5px, 10px, true)
編譯后的css
p {
margin: 5px 10px;
}
循環(huán)迭代
可以循環(huán)取值，也可以循環(huán)賦值;
語法 for <val-name> [,<key-name>] in <expression>
styl
p
for bbbb in 2 3 4 5 6 7
foo bbbb
for a ,i in
編譯后的css
p {
foo: 2;
foo: 3;
foo: 4;
foo: 5;
foo: 6;
foo: 7;
}
@import
支持導(dǎo)入其他stylus樣式;
@media
@media工作原理和在常規(guī)CSS中一樣甘桑，但是跑杭，要使用Stylus的塊狀符號。
styl
@media print
#header
#footer
display none
css
@media print {
#header,
#footer {
display: none;
}
}
@extend
繼承
styl
.msg
padding 10px
margin 10px
border 1px solid #ccc
.warning
@extend .msg
color red
css
.msg,
.warning {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
}
.warning {
color: #f00;
}
