stylus笔记(doing)

超、凢脫俗 2023-07-25 08:45 12阅读 0赞

## stylus笔记 ##

笔记：学习记录  
[ https://www.zhangxinxu.com/jq/stylus/interpolation.php ][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. 方法 ####

[https_www.zhangxinxu.com_jq_stylus_interpolation.php]: https://www.zhangxinxu.com/jq/stylus/interpolation.php