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