使用TWIG和SCSS Mixin应用自定义css类(样式不应用)

Question

早上好，

这对我来说是一个很好的转折点，同时学习Twig和Scass。我确信这个修复是在某个地方添加或删除一行简单的代码，但由于我不知道它是如何工作的，我不知道如何修复它。对于当前的代码，TWIG Include正在应用所选的类"Opacity_20"(或Opacity_40等(。然而，这个类应该改变背景样式，但事实并非如此。

下面是include的HTML片段，以及自定义类将应用的位置

<div class="info-container {{ white_opacity }}">
<div class="tite-container">
<h1 class="title">{{ title|raw }}</h1>
</div> 

下面是div的SCSS-为了便于阅读，我删除了所有其他样式

.info-container{

&:before{

}
&:after{

@include white_opacity;

"white_ocapacity"是有问题的

{% include 'include/banner.html.twig' with {
'title': 'Unplaceables',
'subtitle': 'Placeholder subtitle...',
'text': 'Lorem ipsum ',
'background':  '/img/banners/roadshow/roadshow-banner.jpg',
'white_opacity': 'opacity_20'
}
%}
{% endblock %}

下面是应用类但不应用样式的SCSS

@mixin white_opacity{
}
@mixin opacity_20 {
background-color: rgba(255, 255, 255, 0.20); 
@include white_opacity;
}
@mixin opacity_40 {
@include white_opacity;
background-color: rgba(255, 255, 255, 0.40);
}
@mixin opacity_60 {
@include white_opacity;
background-color: rgba(255, 255, 255, 0.60);
}
@mixin opacity_80 {
background-color: rgba(255, 255, 255, 0.80);
@include white_opacity;
}

Answer 1

我认为您可能误解了mixins的一个关键点：除非显式included，否则它们不会生成任何输出，因此编译后的样式表没有定义任何opacity_*类，因为它们本身就是mixins。这就是为什么它不应用任何样式：它不匹配任何选择器。

您必须将scs更改为：

@mixin white_opacity {
}
.opacity_20 {
/*...*/
}

然而，mixin是可重用的代码块，空的mixin没有任何作用。Mixin就像函数一样，也可以接收参数来更改输出，这正是您想要的。

@mixin white_opacity($opacity: 100) { 
/* Solid white if invoked without arguments */
background-color: rgba(255, 255, 255, 0.01 * $opacity);
}
.opacity_20 {
@include white_opacity(20);
}
/* Other styles */

但您也可以应用DRY原则，并使用scs的其他动态特性一次性生成所有类。

/* Define all styles to generate */
$transparencies: 20, 40, 60, 80;
@each $value in $transparencies {
.opacity_#{$value} {
@include white_opacity($value);
}
}

您可以阅读文档中的变量和循环。