Search code examples
sassmixins

Updating a mixin for themes with SASS 3.4.7


I updated today SASS to use the version 3.4.7 Unfortunetly, one mixin I used since the beginning of my project don't work anymore. I don't understand why...

$program: test1;

@mixin program($programName) {
  @each $p in $programName {
    @if $p == $program {
        @content;
    }
  }
}

$cta-box-type: null !default;

@include program(test1) {
  $cta-box-type: cta-buy, cta-like;
}

@include program(test2) {
  $cta-box-type: cta-like, cta-share;
}

@each $cta-type in $cta-box-type {
    .banner--#{$cta-type} .banner {
      background: white image-url("Modules/Cta/bg-#{$cta-type}-1.jpg") no-repeat bottom left;
      background-size: 100% auto;
    }
}

DEMO SASSMEISTER

The compiled result looks like this:

.banner-- .banner {
  background: white url('/images/Modules/Cta/bg--1.jpg') no-repeat bottom left;
  background-size: 100% auto;
}

Instead of:

.banner--cta-buy .banner {
  background: white url('/images/Modules/Cta/bg-cta-buy-1.jpg') no-repeat bottom left;
  background-size: 100% auto;
}

.banner--cta-like .banner {
  background: white url('/images/Modules/Cta/bg-cta-like-1.jpg') no-repeat bottom left;
  background-size: 100% auto;
}

If someone have an idea why it's no more working, it's gone help me a lot ! Thanks !


Solution

  • I found the solution :

    I simply removed the !default and add !global.

    $cta-box-type: null;
    
    @include program(test1) {
      $cta-box-type: cta-buy, cta-like !global;
    }
    
    @include program(test2) {
      $cta-box-type: cta-like, cta-share !global;
    }