[英]Nested mixins or functions in SASS
Some body know how can i use nested mixins or functions in SASS? 有些人知道如何在SASS中使用嵌套的mixins或函数? I have something like this:
我有这样的事情:
@mixin A(){
do something....
}
@mixin B($argu){
@include A();
}
yeah you already doing it right. 是的,你已经做对了。 You can call first mixin in second one.
您可以在第二个中调用第一个mixin。 check this pen http://codepen.io/crazyrohila/pen/mvqHo
检查这支笔http://codepen.io/crazyrohila/pen/mvqHo
You can multi nest mixins, you can also use place holders inside mixins.. 你可以多巢混合,你也可以在mixins里面使用占位符..
@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;
}
As mentioned in the other answers, you can include mixins in other mixins. 如其他答案中所述,您可以在其他mixins中包含mixins。 In addition, you can scope your mixins.
此外,您可以调整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. 范围混合意味着你可以在不同的范围内拥有多个名为相同的mixin,而不会产生冲突。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.