【发布时间】:2015-08-05 13:09:33
【问题描述】:
Edit: This question has been marked as a duplicate and then linked to two other questions that do not answer my question. My question is "what is the best approach" and the linked to questions are focused on the @extend sass method and absolutely no explanation of how this relates to my question.
我有一个 Bootstrap Web 应用程序,其中包含一些我无法更改 HTML 或 CSS 类的组件。
这让保持所有样式一致和集中的事情变得很尴尬,因此我可以在一个元素样式更新的地方更新它。
我想尝试使用 @extend SASS 功能从 Bootstrap SASS 文件中提取我想要的位。
例如,如果这是生成的并且我无法修改它:
<a href="#" class="myButton">Here is the button</a>
然后我可以这样做:
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/variables";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/buttons";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/vendor-prefixes";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/tab-focus";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/opacity";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/buttons";
.myButton{
@extend .btn, .btn-primary;
}
这会为“.myButton”类生成不到 200 行(压缩前)的附加 CSS。虽然它有效,但我不确定这是否是最好的方法,因为一旦我映射了几件东西,它会给我的 CSS 文件增加很多大小。我想这不是一个大问题,一旦它被缩小和压缩,但由于冗余而感觉很糟糕。
我曾考虑使用 JavaScript 来更改 HTML 输出,但我也不确定这是否是正确的方法,因为浏览器禁用了 JavaScript。
在我的示例中,我只是使用我的自定义样式表,然后使用标准的缩小版引导程序。为了实现我想要的,我应该修改引导核心并使用我的编译版本吗?
这听起来是一个相当普遍的问题,所以我假设有人可能已经制作了类映射器或其他东西,但我找不到任何东西(除了许多地理引导地图)。
你会采取什么方法?
【问题讨论】:
-
@cimmanon 我真的不明白你在这里做了什么。您关闭了问题并将我链接到 2 个问题,但我看不出他们如何回答我的问题。这些问题都没有以我可以与我的问题相关的形式提出任何解决方案。你能给我提供至少一些小的解释,以便我可以尝试加入这些点吗?
-
答案是:你不能。 Bootstrap 的编写方式不能以您想要的方式与 Sass 提供的构造一起使用。如果你想以这种方式使用它,你必须修改 Bootstrap。
-
我不能什么?什么是我不能做的?
-
我认为您没有真正阅读我的问题。我建议了 3 种方法,并询问哪种方法最好。你的回答是结束问题并说“你不能”。您的回答与我的问题完全脱节且无济于事。