SCSS（或SASS）是否可以为多个元素添加相同的类，但每个元素的样式不同？ [复制]

Question

这就是我想要的：

来自这样的事情（这段代码不起作用，它会抛出一个错误）：

.ia-loading {
  select.& {
    border: 2px solid blue;
  }
  input.& {
    border: 2px solid orange;
  }
}

得到这个：

select.ia-loading { border: 2px solid blue; }
input.ia-loading { border: 2px solid orange; }

我尝试了几种组合，但都没有奏效：

这个：

.ia-loading {
  select & {
    border: 2px solid blue;
  }
  input & {
    border: 2px solid orange;
  }
}

生成这个 css，这不是我想要的：

select .ia-loading { border: 2px solid blue; }
input .ia-loading { border: 2px solid orange; }

这个：

.ia-loading {
  select& {
    border: 2px solid blue;
  }
  input&  {
    border: 2px solid orange;
  }
}

抛出此错误：

"&" may only be used at the beginning of a compound selector.

非常感谢。

Answer 1

您可以像这样为此制作小型 mixin：

@mixin test($elem) {
  #{$elem}.test {
    @content;
  }
}

如果你真的想在你的类中使用它，你可以从 Sass 3.3 开始使用 @at-root 指令（否则你只是把它放在你的主类之外）

.test {
  margin: 20px;
  @at-root {
    @include test(select) {
      border: 1px solid red;
    }
    @include test(input) {
      border: 1px solid blue;
    }
  }
}

DEMO

Answer 2

您在输入和选择后面使用“&”的原因是什么？ 它仅在您想要进行特定“操作”时使用，例如悬停、活动等。

例子

.ia-loading
   &:hover
      color: #FFF

同样在 Sass 中你不能使用括号，它在 scss 中使用

我也不认为你可以按照你想要的方式去做。应该这样做：

.ia-loading
    border: 2px solid
select
   .ia-loading
      border-color: blue
input
   .ia-loading
      border-color: orange