Question

我在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编译器。

Answer 1

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

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

Answer 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/

在SCSS中使用@each的嵌套属性

2 个答案: