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

Good morning,

This has been quite a brain turner for me, learning Twig and Scass at the same time. I'm sure this fix is a simple line of code adding or removing somewhere, but since I do not understand how it works, I cannot understand how to fix it. With the current code the TWIG Include is appling the class 'Opacity_20' (or Opacity_40 etc) as selected. However this class is supposed to change the background style - but its not.

Below is the snip of HTML of the include and where the custom class will apply

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

Below is the SCSS for the div - I removed all other styles for ease of reading

.info-container{
   

    &:before{
        
    }

    &:after{
        
        @include white_opacity;

'white_opacity' is the include in question

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

Below is the SCSS that is applying the class but not the style

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

Solution

I think you might have misunderstood a crucial thing about mixins: they don't generate any output unless explicitly included, so your compiled stylesheet doesn't have any opacity_* classes defined, since those are mixins themselves. That's why it isn't applying any style: it doesn't match any selector.

You would have to change your scss to:

@mixin white_opacity {
}

.opacity_20 {
/*...*/
}

However, mixins are reusable code blocks, an empty mixin doesn't do anything. Mixins are just like functions and can also receive parameters to change the output, that's precisely what you want here.

@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 */

But you can also apply DRY principles and generate all your classes in one go using other dynamic features of scss.

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

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

You can read up on variables and loops in the documentation.