在 SCSS 中使用 @each 嵌套属性答案

【问题标题】：Nested properties with @each in SCSS在 SCSS 中使用 @each 嵌套属性
【发布时间】：2016-01-25 21:06:32
【问题描述】：

我在 SCSS 中有这段代码：

border: {
    right: 0;
        @each $side in (top, bottom) { 
            #{$side}: {
                left: {
                    radius: 5px;
                }
            }
        }
    }

它编译成

border-right: 0;
top-left-radius: 5px;
bottom-top-left-radius: 5px;

这不是我期望看到的结果。有没有办法编译

border-right: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

带有嵌套属性和@each？我正在使用 Leafo 的 scssphp 编译器。

【问题讨论】：

无法复制。向编译器的维护人员提交错误报告：sassmeister.com/gist/c782373ab556e378b13e

标签： css sass

【解决方案1】：

我刚刚在几个环境中对此进行了测试，并且您的代码每次都能正确编译。问题可能是您使用的 SASS 版本。我个人将 grunt 与最新的 grunt-contrib-sass 版本一起使用。更多信息在这里：

https://github.com/gruntjs/grunt-contrib-sass

【讨论】：

【解决方案2】：

为什么不尝试 sass mixin，你可以简单地使用 sass mixin。

@mixin border-radius($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
.radius{
  background-color: black;
  padding: 10px;
  color: white;
  @include border-radius(5px 0 0 5px);
}

小提琴演示：https://jsfiddle.net/nikhilvkd/ywdsnt8k/

【讨论】：