Sass 问题：连接元素答案

【问题标题】：Sass issue : concatenating the elementsSass 问题：连接元素
【发布时间】：2015-12-29 12:10:40
【问题描述】：

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

【问题讨论】：

为什么在calc() doesn't need them 用于最新版本的现代浏览器时使用前缀？
我发现iPhone4上出现的问题
这里没有足够的代码来重现问题。我们需要能够按原样获取代码并对其进行编译以获得您所看到的确切结果（提示：如果您无法在 sassmeister 上重现它，则说明您没有提供足够的代码）。
我已经添加了我用来包含 mixin 的方法。
@Gabriel - 似乎在 sassmeister 工作？

标签： css sass vendor

【解决方案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);
}

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

【讨论】：

【解决方案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); 
}

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

【讨论】：

OP 在这里没有提供足够的信息。他们声称他们尝试过的所有东西都不起作用（提示：您编写的代码实际上出现在 OP 中，他们声称“我是这样写的，不会有结果”）。