我可以在 SASS class 中使用 css 属性选择器来设置自己的样式吗

Question

我正在尝试使用 css 属性选择器来设置 class 的样式以应用于 class 本身。我的用例是将它们包装在媒体选择器中，以便在应用断点时设置 class 样式，但我想保持示例简单并从第一原则开始工作。

我有一个用于以下代码的沙箱 here

这是我的逻辑...在 SCSS 中，我们可以使用 &

为 class 本身设置样式

即

.myclass {
 & {
  border: ...
 }
}

我们可以将其细化为特定的 class 组合

.myclass {
 &.otherclass {
  border: ...
 }
}

我们还可以使用属性选择器class设置样式

  div[class*="md"] {
    border: 10px solid orange;
  }

我们能否将它们组合起来以在 sass class 中使用它们来表示“样式 classes 根据 class 范围内的属性选择器仅组合& 和 div[class*="value"] 说明符?

即对于

      <div className="test1">
        <div className="xs md">I am styled using div[class*="md"] selector</div>
      </div>
      <div className="test2 xs md">
        I am not styled by my selector. Can I style myself using attribute
        selectors?
      </div>

有风格

.test1 {
  & {
    background: lightblue;
  }

  div[class*="md"] {
    border: 10px solid blue;
  }
}

.test2 {
  & {
    background: lightgreen;
  }

  div[class*="md"] {
    border: 10px solid green;
  }
}

我可以在 class 中设置 .test2.md 的样式，类似于使用 &?

谢谢

Answer 1

你要这样做吗

.test2 {
  & {
    background: lightgreen;
  }

  &[class*="md"] {
    border: 10px solid green;
  }
}

我可以在 SASS class 中使用 css 属性选择器来设置自己的样式吗

Can i use css attribute selector within a SASS class to style itself

sass

css-selectors