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 test($elem) {
  #{$elem}.test {
    @content;
  }
}

如果你真的想在课堂上使用它，你可以使用@at-root指令，因为Sass 3.3（否则你只是把它放在你的主类之外）

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

DEMO

Answer 2

您使用＆＃39;＆amp;＆＃39;的原因是什么？输入和选择背后？它仅用于您想要特定的＆＃34;动作＆＃34;像悬停，活跃等。

实施例

.ia-loading
   &:hover
      color: #FFF

同样在Sass中，您不能使用scss中使用的括号

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

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

是否可以使用SCSS（或SASS）将相同的类添加到多个元素中，但每个元素的样式不同？

2 个答案: