Question

我想在div中嵌套一个css框架，以便提供这样的范围命名空间：

.myframework {
  @import url("myframework.css");
}

但是，该框架具有＆lt; html＆gt;的规则。和＆lt; body＆gt;标签，所以上面的代码将编译为：

.myframework html { ... }
.myframework body { ... }

这不行。我可以手动更改任何此类引用，但是每次有框架更新时我都必须手动执行此操作。在LESS中是否存在等同于查找/替换的内容，我可以应用于这样的@import语句：

/* psedudocode */
.myframework {
  str_replace( ( @import url("myframework.css") ), 'html', '.myframework-html';
}

将编译为：

.myframework .myframework-html { ... }

我的想法是，我可以像这样对框架进行范围调整：

<html>

  <body>

    No framework styles applied here

    <div class="myframework">
      <div class="myframework-html">
        <div class="myframework-body">

          Framework styles are applied here

        </div>
      </div>
    </div>

  </body>
</html>

此外，我可能已经使用了一些正则表达式来确保只有html和body TAGS受到影响，而不是类名，url（）路径等。

Answer 1

虽然不是很少，但这可能是一个更好的解决方案：https://www.npmjs.com/package/grunt-css-selectors

这个grunt插件会为所有css选择器添加前缀.foo，但html / body选择器将替换为.foo。这样，我可以从LESS或SASS编译，然后单独运行prefix命令。

我可以在LESS导入中找到并替换吗？

1 个答案: