sass Interpolation 自定义的rem()函数没生效

背景

.app-root {
   width: calc(100% - rem(100));
}

上面就是我之前写的代码，平时用rem() 都是没有问题的，但是上面的函数没有生效

解决方案 Interpolation #{}

Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS

.app-root {
   width: calc(100% - #{rem(100)});
}

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}

.example {
  unquoted: #{"string"};
}

参考资料

sass-lang.com/documentati…