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

以下是用于在mix文件中包含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);}

如果我试着写没有＆＃34; +＆＃34;

   #{$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});
}

用于在mix文件中包含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);
}

＆＃34;供应商列表＆＃34;真的没必要

Answer 2

我能够使用node-sass成功编译：

$vendorlist: -webkit-, -moz-, -o-;

@mixin calcmixx($prop, $val) {
  #{$prop}: calc(#{$val});
  @each $pref in $vendorlist {
    #{$prop}: #{$pref}calc(#{$val});
  }
}

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

到此：

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

原始问题中的+是不必要的

Sass问题：连接元素

2 个答案: