Question

对于最近的网站，客户有5种不同的品牌造型颜色。因此，为了跟踪较少文件中的所有内容（我们使用节点编译为最终的css文件），我将颜色定义为较少的变量，并使用.button-variant（）mixin生成样式。例如

@color-cta-light: #df134d;
@color-cta-dark: #860c2f;
@color-cta-background: #fcf7fa;

.btn-cta {
    .button-variant(#ffffff, @color-cta-light, @color-cta-dark);
}

工作正常。但是，我也用面板完成了这个，现在我最终得到了一个11,000行长的css文件。这很长，因为我们需要大多数默认的Bootstrap样式（例如.btn样式）以及我的自定义样式。

我想知道的是，（仅仅通过使用按钮作为示例保持它）有一个很好的简单方法来删除css中与默认Bootstrap按钮样式相关的行，即btn-success，btn - 警告等。通过简单，我的意思是自动。我们使用节点lessc模块来编译较少的文件（使用grunt观察器），所以我想想在编译之后需要发生的任何事情。

或者，我应该修改默认的bootstrap mixins什么都不做，并使用我自己的自定义mixins？我觉得应该可以工作，但这意味着每个新版本的Bootstrap（目前为3.1）花费一些额外的时间来确保自定义mixin是最新的。

我希望最终得到的是一个样式表，具有来自button.less的默认按钮样式，没有未使用的CSS的额外重载。根据我的理解，这是不可能的，但我希望有一些我不知道的工具可以帮助我的情况。

Answer 1

如果我理解正确，查看你的问题和你对Bass Jobsen的评论，你想要保持引导程式样式，但不用于“按钮样式。 “

我相信LESS (reference) feature仍然是您想要的，但只是有选择地应用。

假设您正在使用“bootstrap.less”文件，请在“buttons.less”文件之前添加引用符号，就像这样（为了简洁，我省略了大部分正常的“boostrap.less”文件）：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

...

// Core CSS
...
@import (reference) "buttons.less";

// Components
...

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

这将从输出css代码中生成“buttons.less”中的所有类完全停用，但仍然可以将这些类保留用于mixin目的。如果您需要该代码中的特定部分，我们假设您要保留基础.btn类，那么您必须将其添加回您的css中，如下所示：

.btn {
  .btn;
}

外部.btn将改造代码中的类，而内部.btn将使用引用的“buttons.less”.btn来生成代码。

以这种方式使用(reference)可以让你有选择地删除模块中的boostrap方面，同时保持这些方面对于其余的bootstrap以及任何mixin用途都是可用的。如果您希望从模块中删除大部分代码，这可能是一种更好的方法（如果您实际上想要保留大部分代码，那么最好只保留未使用的部分，通常导入它。

Answer 2

您可以使用带参考的导入：

@import (reference) "bootstrap.less";
@color-cta-light: #df134d;
@color-cta-dark: #860c2f;
@color-cta-background: #fcf7fa;

.btn-cta {
    .button-variant(#ffffff, @color-cta-light, @color-cta-dark);
}

这将只为您提供CSS按钮。（还有一些：之前：伪类之后对我来说似乎是个错误。）

删除Bootstrap 3默认样式

2 个答案: