使用变量
我们还是以举例开始学习
我们打开 themes/landscape/source/css 找到 _variables.styl 文件并打开
会发现很多如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13
| // Fonts font-sans = -apple-system, "Microsoft YaHei" BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif font-serif = Georgia, "Times New Roman", serif font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace font-icon = FontAwesome font-icon-path = "fonts/fontawesome-webfont" font-icon-version = "4.0.3" font-size = 14px line-height = 1.6em line-height-title = 1.1em
|
这里其实把相应的CSS属性值赋值给了一个变量
使用的时候也很简单,直接调用即可。如下代码
1 2 3 4 5 6 7 8 9
| body font: font-size font-sans =>转化成正常css的话就是 body{ font: 14px -apple-system, "Microsoft YaHei" BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
|
*可以不用声明变量,直接使用 @ 来读取该属性的值也可以。如以下例子
1 2 3 4 5
| body width 940px position absolute left 50% margin -(@width / 2)
|
动态属性
使用 {花括号} 能方便私有前缀的添加如下例,它可以批量修改属性名称
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| attribute(atrs, args) -webkit-{atrs} args -moz-{atrs} args {atrs} args
border-radius() attribute('border-radius', arguments)
button border-radius 2px
=>相当于 button{ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
|
{花括号} 也可以用在属性值上如下例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| 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; }
|