混入(Mixins)
# stylus混入(Mixins)
# 混入(Mixins)
混入和函数定义方法一致，但是应用却大相径庭。
一个简单的混入应用，定义一个超出显示省略号的ellipsis()方法，在需要用到的地方只需插入这个方法，其样式会扩展并复制到选择器中。
ellipsis()
overflow hidden
white-space nowrap
text-overflow ellipsis
1
2
3
4
2
3
4
p
ellipsis()
1
2
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
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
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
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
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
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
2
3
4
来源：https://www.zhangxinxu.com/jq/stylus/mixins.php (opens new window)
编辑 (opens new window)
上次更新: 2021/01/24, 15:14:51