使用TWIG和SCSS混合应用自定义css类（不应用样式）

早上好

这对我来说是一个相当好的脑力转换，同时学习Twig和Scass。我确信这是一个简单的代码行添加或删除某处，但由于我不明白它是如何工作的，我无法理解如何修复它。在当前代码中，细枝包含正在应用所选的类“不透明度20”（或不透明度40等）。然而，这个类应该改变背景样式，但它不是

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

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

“白色不透明度”是有问题的包括

{% 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 %}

下面是应用类而不是样式的SCS

@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;
}

---

我想您可能误解了关于

mixin

s的一个关键问题：除非显式地

include

d，否则它们不会生成任何输出，因此编译后的样式表没有定义任何

opacity.*

类，因为它们本身就是

mixin

s。这就是为什么它不应用任何样式：它不匹配任何选择器

您必须将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 */

但您也可以应用原则，使用SCS的其他动态功能一次性生成所有类

/* Define all styles to generate */
$transparencies: 20, 40, 60, 80;

@each $value in $transparencies {
  .opacity_#{$value} {
    @include white_opacity($value);
  }
}

---

您可以阅读文档中的内容。

这里仍然有一个问题，有人告诉我应该悬赏这个问题，但我不确定您的声誉如何还不足以提供悬赏，但当您这样做时，您应该看到“添加评论”下面的链接。你可以参考。谢谢你的意见，非常感谢

/* Define all styles to generate */
$transparencies: 20, 40, 60, 80;

@each $value in $transparencies {
  .opacity_#{$value} {
    @include white_opacity($value);
  }
}