使用 TWIG 和 SCSS Mixin 应用自定义 css class（样式未应用）

Question

早上好，

同时学习 Twig 和 Scass，这对我来说真是个脑洞大开的人。我确定此修复程序是在某处添加或删除的一行简单代码，但由于我不了解它的工作原理，因此无法理解如何修复它。使用当前代码，TWIG Include 正在应用所选的 class 'Opacity_20'（或 Opacity_40 等）。然而，这个 class 应该会改变背景样式 - 但它不会。

下面是包含的 HTML 片段以及自定义 class 将应用的地方

<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_opacity' 是有问题的 include

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

下面是应用 class 而不是样式

的 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_* 类已定义，因为它们本身就是 mixin。这就是它不应用任何样式的原因：它不匹配任何选择器。

您必须将 scss 更改为：

@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 原则并使用 scss 的其他动态特性一次性生成所有类。

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

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

您可以在文档中阅读 variables and loops。

使用 TWIG 和 SCSS Mixin 应用自定义 css class（样式未应用）

Applying custom css class using TWIG and SCSS Mixin (Style not applying)

css

debugging

sass

twig

include