css - Sass 问题 : concatenating the elements

Question

我在使用 sass 连接元素时遇到问题。我想获得 -webkit-calc 像这样一起写:

width: -webkit-calc(100% - 6rem);
width: -moz-calc(100% - 6rem);
width: -o-calc(100% - 6rem);

Sass 代码:

$vendorlist: unquote("-webkit-") unquote("-moz-") unquote("-o-");
@mixin calcmixx($prop, $val) {
#{$prop}: calc(#{$val});
@each $pref in $vendorlist {
    #{$prop}:#{$pre} + calc(#{$val});
  }
}

下面是在 sass 文件中包含 mixin 的方法:

.PromoTitle{ margin: 0 auto; @include calcmixx( width, '100% - 6rem');

CSS 结果:

.PromoTitle{
    width: calc(100% - 6rem);
    width: -webkit- +calc(100% - 6rem);
    width: -moz- +calc(100% - 6rem);
    width: -o- +calc(100% - 6rem);}

如果我尝试在没有“+”的情况下书写

   #{$prop}:#{$pref} calc(#{$val});

这是结果:

width: calc(100% - 6rem);
width: -webkit- calc(100% - 6rem);
width: -moz- calc(100% - 6rem);
width: -o- calc(100% - 6rem);

而且我这样写是不会有结果的:

#{$prop}:#{$pref}calc(#{$val});

Answer 1

Sass 代码:

@mixin calcmixx($prop, $val) {
  @each $pref in -webkit-, -moz-, -o- {
    #{$prop}: $pref + calc(#{$val});
  } 
  #{$prop}: calc(#{$val});
}

用于在 sass 文件中包含 mixin 的方法:

.PromoTitle {
    margin: 0 auto;
    @include calcmixx(width, '100% - 6rem');
}

它编译为:

.PromoTitle {
  margin: 0 auto;
  width: -webkit-calc(100% - 6rem);
  width: -moz-calc(100% - 6rem);
  width: -o-calc(100% - 6rem);
  width: calc(100% - 6rem);
}

“供应商名单”真的没必要