background

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

This is the code I wrote earlier. Rem () normally works fine, but the above function doesn’t work

Solution 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)});
}
Copy the code
@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);
Copy the code
@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 }
  }
}
Copy the code
.example {
  unquoted: #{"string"};
}
Copy the code

The resources

Sass-lang.com/documentati…