Question

我今天更新了SASS使用版本 3.4.7 不幸的是，我项目开始时使用的一个mixin不再工作了。我不明白为什么......

$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

编译结果如下：

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

而不是：

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

如果有人知道为什么它不再工作，它会帮助我很多！谢谢！

Answer 1

我找到了解决方案：

我只是删除了！default并添加了！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;
}

使用SASS 3.4.7更新主题的mixin

1 个答案: