stylus前処理入門(3)--補間
1724 ワード
作者:blue(別名一書and一世界)私のgithub**用途:*CSS前処理言語stylus初心者入門転送ドア: stylus前処理入門(一)--セレクタ stylus前処理入門(二)--変数
補間は、解析式または変数に相当し、補間の位置を値に置き換えます.注意:属性値の補間には使用できません(ただし、属性値は変数で置換できます). cssプロパティ名で補間 を使用
変換:セレクタで補間 を使用する.
変換:
変換:
高度な使用:mixinsとの併用
へんかん
高度な使用:サイクル反復(iteration)と組み合わせて使用
変換:
QUOTE: If you are not moving ahead , you are falling behind.
補間(interporation)
補間は、解析式または変数に相当し、補間の位置を値に置き換えます.注意:属性値の補間には使用できません(ただし、属性値は変数で置換できます).
partOfProp = radius
value = 10px
div
border-{partOfProp} value /* */
変換:
div {
border-radius: 10px;
}
selector = div
partOfProp = radius
value = 10px
{selector}
border-{partOfProp} value
変換:
div {
border-radius: 10px;
}
selectors = '#foo,#bar,.baz'
{selectors}
background: #000
変換:
#foo,
#bar,
.baz {
background: #000;
}
高度な使用:mixinsとの併用
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
box-shadow()
vendor('box-shadow', arguments)
button
border-radius 1px 2px / 3px 4px
へんかん
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}
高度な使用:サイクル反復(iteration)と組み合わせて使用
table
for row in 1 2 3 4 5
tr:nth-child({row})
height: 10px * row
変換:
table tr:nth-child(1) {
height: 10px;
}
table tr:nth-child(2) {
height: 20px;
}
table tr:nth-child(3) {
height: 30px;
}
table tr:nth-child(4) {
height: 40px;
}
table tr:nth-child(5) {
height: 50px;
}
QUOTE: If you are not moving ahead , you are falling behind.