stylus跟less sass做的是同樣的事情俏扩,之間有很多共同的地方卿嘲,比如變量大刊、計(jì)算的想法
歸納下stylus基礎(chǔ)知識(shí)
書寫習(xí)慣
沒有封號(hào)穷缤、花括號(hào)敌蜂、逗號(hào)也是可以執(zhí)行的
- 封號(hào)可選
- 花括號(hào)可選
- 逗號(hào)可選
- 括號(hào)可選
styl
*
margin 0
padding 0
編譯后的css
* {
margin: 0;
padding: 0;
}
變量
可以將常用的參數(shù)定義為變量,在需要的地方直接引用變量即可津肛;
比如color章喉、font-size、width身坐、height等等秸脱;
可以將這些東西抽出來形成一個(gè)文件,也就是主題掀亥;
- 書寫上: 可以寫成font-size撞反,也可以寫成@font-size;
styl
font-size = 16px //單一變量
font = 12px/16px '微軟雅黑' //變量表達(dá)式
$width = 16px //可以帶標(biāo)示符
a
font font //直接引用單一變量
width $width //直接引用變量表達(dá)式
margin-left (@width/2) //可以用@來訪問該屬性當(dāng)前對(duì)應(yīng)的值
編譯后的css
a {
font: 0.75px '微軟雅黑';
width: 16px;
margin-left: 8px;
}
用類似CSS的方式開發(fā)
Stylus可以用結(jié)構(gòu)來表現(xiàn)css層級(jí)關(guān)系
styl
body
color red
ul
line-height 20px
height 20px
font-size 16px
li
display inline-block
padding 10px
border 1px solid #ccc
text-align center
a
color red
font-size 12px
編譯后的css
body {
color: #f00;
}
body ul {
line-height: 20px;
height: 20px;
font-size: 16px;
}
body ul li {
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
body ul li a {
color: #f00;
font-size: 12px;
}