萨斯的@content指令使用案例

Question

嘿家伙我有青菜约@content一个小问题

我还没有很好地理解如何使用它，就像我读过的内容，如果你想使用一个混合并插入一些别的地方。

我的问题是：为什么我需要使用@content如果没有作品。

我的例子：

@mixin context--alternate-template { 
    margin: 0; 
    font-size: 14px; 
} 

.content-sample { 
    @import context--alternate-template; 
    background-color: black; 
} 

输出CSS：

.content-sample { 
    margin: 0; 
    font-size: 14px; 
    background-color: black; 
} 

样品我在网上锯：

@mixin context--alternate-template { 
    margin: 0; 
    font-size: 14px; 
    @content 
} 



.content-sample { 
    @import context--alternate-template; 
    background-color: black; 
} 

输出CSS：

.content-sample { 
     margin: 0; 
     font-size: 14px; 
     background-color: black; 
    } 

所以是的为什么我需要插入@content在mixin中如果不工作的话。

Answer 1

@content对于在您的mixin中注入规则副本很有用。看到你在网上的样品的正确语法变为：

SCSS：

@mixin context--alternate-template { 
    margin: 0; 
    font-size: 14px; 
    @content 
} 

.content-sample { 
    @include context--alternate-template { 
    background-color: black; 
    } 
} 

注意@include调用后括号内。现在，在font-size: 14px;之后注入规则background-color: black;。

CSS输出中：

.content-sample { 
    margin: 0; 
    font-size: 14px; 
    background-color: black; 
} 

在这种情况下，@content是没用的。事实上，随着@content最有趣的用法是将注入嵌套的选择：

SCSS：

@mixin context--alternate-template { 
    margin: 0; 
    font-size: 14px; 
    @content 
} 

.content-sample { 
    @include context--alternate-template { 
    .important-thing { 
     color: red; 
    } 
    &.is-italic { 
     font-family: 'my-webfont-italic'; 
    } 
    } 

    // outside mixin call 
    background-color: black; 
} 

CSS输出：

.content-sample { 
    margin: 0; 
    font-size: 14px; 
    background-color: black; 
} 
.content-sample .important-thing { 
    color: red; 
} 
.content-sample.is-italic { 
    font-family: 'my-webfont-italic'; 
}