CSS SASS 中的嵌套 mixin 或函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16020316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nested mixins or functions in SASS
提问by iLevi
Some body know how can i use nested mixins or functions in SASS? I have something like this:
有些人知道如何在 SASS 中使用嵌套的 mixin 或函数？我有这样的事情：
@mixin A(){
do something....
}
@mixin B($argu){
@include A();
}
采纳答案by crazyrohila
yeah you already doing it right. You can call first mixin in second one. check this pen http://codepen.io/crazyrohila/pen/mvqHo
是的，你已经做对了。您可以在第二个中调用第一个 mixin。检查这支笔http://codepen.io/crazyrohila/pen/mvqHo
回答by Ignatius Andrew
You can multi nest mixins, you can also use place holders inside mixins..
您可以嵌套多个 mixin，也可以在 mixin 中使用占位符。
@mixin a {
color: red;
}
@mixin b {
@include a();
padding: white;
font-size: 10px;
}
@mixin c{
@include b;
padding:5;
}
div {
@include c();
}
which gives out CSS
它给出了 CSS
div {
color: red;
padding: white;
font-size: 10px;
padding: 5;
}
回答by Frederik Krautwald
As mentioned in the other answers, you can include mixins in other mixins. In addition, you can scope your mixins.
正如其他答案中提到的，您可以在其他 mixin 中包含 mixin。此外，您可以确定 mixin 的范围。
Example
例子
.menu {
user-select: none;
.theme-dark & {
color: #fff;
background-color: #333;
// Scoped mixin
// Can only be seen in current block and descendants,
// i.e., referencing it from outside current block
// will result in an error.
@mixin __item() {
height: 48px;
}
&__item {
@include __item();
&_type_inverted {
@include __item();
color: #333;
background-color: #fff;
}
}
}
}
Will output:
将输出：
.menu {
user-select: none;
}
.theme-dark .menu {
color: #fff;
background-color: #333;
}
.theme-dark .menu__item {
height: 48px;
}
.theme-dark .menu__item_type_inverted {
height: 48px;
color: #333;
background-color: #fff;
}
Scoping mixins means that you can have multiple mixins named the same in different scopes without conflicts arising.
作用域混入意味着您可以在不同的作用域中拥有多个名称相同的混入，而不会产生冲突。
