[Scss : 4] 插值语法

插值几乎可以在Sass样式表中的任何地方使用，以将SassScript表达式的结果嵌入到CSS块中。插值始终返回一个未加引号的字符串。

@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);

编译后

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

@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
        }
    }
}

编译后

.pulse {
  animation-name: inline-ug97xp3g8;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-ug97xp3g8 {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}