L3F.WIN

Github及Hexo的使用

0%

学习stylus【2】变量

发表于 更新于 分类于

使用变量
我们还是以举例开始学习

我们打开 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;
}