LESS 将伪类扩展为 !important

Posted 2023-03-06

【中文标题】LESS 将伪类扩展为 !important

【英文标题】：LESS extend pseudoclasses as !important

【发布时间】：2017-04-04 19:40:06

【问题描述】：

我想将一些引导类扩展为 !important。我就是这样做的：

@import (less, reference) "bootstrap/less/bootstrap.less";
.my-row 
    .row !important;

这就是我得到的：

.my-row:before,
.my-row:after 
    content: " ";
    display: table;

.my-row:after 
    clear: both;

.my-row 
    margin-left: -10px !important;
    margin-right: -10px !important;

不幸的是，带有伪类的选择器没有被标记为 !important。我应该如何扩展课程以使所有内容都标记为 !important？

【问题讨论】：

!important 不好。为什么不直接增加选择器的特异性呢？

!important 是一个可怕的 CSS 实现，为什么你需要使用它？

此!important 技术用于可嵌入的 javascript 小部件

【参考方案1】：

首先正如詹姆斯和凯尔所说。使用!important 很糟糕，但在某些情况下我们需要使用它，我可以理解。

在你的情况下。您可以使用!important 来排课，但不能在pseudo-classes 上使用，这是有限制的。

但您仍然可以使用以下解决方案。如果您只需要.row。它会按你的意愿工作。

    .my-row 
      .row !important;
      &:before,
      &:after 
          content: " " !important;;
          display: table !important;;
      
      &:after 
          clear: both !important;;
      
    

【讨论】：

还有更通用的解决方案吗？我需要导入大量规则

那么不要对所有事情都使用 !important。尝试寻找其他解决方案。