stylus筆記(doing)

stylus筆記

筆記：學習記錄
https://www.zhangxinxu.com/jq/stylus/interpolation.php

1. 變量(Variables)

$font-size = 14px
body
    font $font-size "宋體"

屬性查找

可以定義變量h 和前置@width來訪問該屬性名對應的值

.logo
    width 100px
    height h = 150px
    margin-left -(@width /2)
    margin-top -(h /2)

2.插值(Interpolation)

使用{}字符包圍表達式來插入值

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

3.混合書寫(Mixins)

混入：

混入和函數定義方法一致，但是應用卻大相徑庭。

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius 5px

注意到我們混合書寫中的border-radius當作了屬性，而不是一個遞歸函數調用。

更進一步，我們可以利用arguments這個局部變量，傳遞可以包含多值的表達式。

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

父級引用

混合書寫可以利用父級引用字符&

混合書寫中的混合書寫

inline-list()
  li
    display inline
comma-list()
  inline-list()
  li
    &:after
      content ', '
    &:last-child:after
      content ''
ul
  comma-list()

渲染爲：

ul li:after {
  content: ", ";
}
ul li:last-child:after {
  content: "";
}
ul li {
  display: inline;
}

4. 方法