混入(Mixins)

# stylus混入(Mixins)

# 混入(Mixins)

混入和函数定义方法一致，但是应用却大相径庭。

一个简单的混入应用，定义一个超出显示省略号的ellipsis()方法，在需要用到的地方只需插入这个方法，其样式会扩展并复制到选择器中。

ellipsis()
  overflow hidden
  white-space nowrap
  text-overflow ellipsis

1
2
3
4

p
  ellipsis()

1
2

下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。

当border-radius()选择器中调用时候，属性会被扩展并复制在选择器中。

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

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

1
2
3
4
5
6
7

编译成：

form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

1
2
3
4
5

使用混入书写，你可以完全忽略括号，提供梦幻般私有属性的支持。

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

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

1
2
3
4
5
6
7

注意到我们混合书写中的border-radius当作了属性，而不是一个递归函数调用。

更进一步，我们可以利用arguments这个局部变量，传递可以包含多值的表达式。

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

1
2
3
4

现在，我们可以像这样子传值：border-radius 1px 2px / 3px 4px!

另外一个很赞的应用是特定的私有前缀支持——例如IE浏览器的透明度：

support-for-ie ?= true

opacity(n)
  opacity n
  if support-for-ie
    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')

#logo
  &:hover
    opacity 0.5

1
2
3
4
5
6
7
8
9
10

渲染为：

#logo:hover {
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

1
2
3
4

来源：https://www.zhangxinxu.com/jq/stylus/mixins.php (opens new window)

编辑

上次更新: 2020/08/01, 14:31:12

← CSS-function汇总