在 less 中使用 "Starts with" 选择器

Question

假设我有一个div喜欢

<div class="col-d-1 col-m-5">some content</div>

我要selectdiv。通常没问题...我的问题是，有更多 css 作用于此 div。所以我不想使用！important。我尝试使用多个 select 或者保留这个 "important"。现在我知道会有一个 col-m- 但我不知道它的价值....即使它是 1、2、3 或任何...

实际上在 CSS 我会使用

.col-d-1 [class^='col-m-'] {
    background: red;
}

类似这样的事情 select 我的 col-d-1 有一些 col-m-

但是如何将其转换为 less 呢？

我以为

.col-d-1 {
    &.col-m-* {
        background: red;
    }
}

但是我试过都没用^^

有什么建议吗？

或者这还不够准备好吗？

Answer 1

好吧，LESS 确实识别 CSS，所以保持不变应该可以。

另一个选项是使用原始选择器组合它：

.col-d-1 {
    &[class*='col-m-'] {
        background: red;
    }
}

因为你在 class 属性上进行模式匹配，而不是检查其中的 class 是否以 col-m- 开头，你需要使用包含选择器 *=, 没有开始选择器。

Answer 2

这应该适合你：

.col-d-1 {
    &[class*='col-m-'] {
        background: red;
    }
}

Use the "Starts with" selector in less