LESS 和 CSS 进口 - 变得疯狂

Question

我的 LESS 和 CSS 目前有一个问题，在覆盖文件之前调用 Bootstrap.less 的导入，但第一个导入覆盖 CSS..

例如，假设我的 bootstrap.less 文件如下所示：

/* ALL STANDARD BOOTSTRAP LESS FILE HERE*/

// Generic Widget Styles
@import "components/_widget-styles.less";

// Header Area
@import "components/_header-area.less";

// Global Search Spinner
@import "components/_search-spinner.less";

// Smart Feed
@import "components/_smart-feed.less";

// Home Page Container
@import "components/_home-container.less";

// Footer
@import "components/_footer.less";

// Documents Page Container
@import "components/_documents.less";

我的通用小部件样式有一些样式可以在整个站点和主页容器中使用和覆盖任何在我看来都不是一件好事的风格。它应该使用最后一个样式添加到 CSS 文件吗？

Answer 1

Should it use the last style to be added to the CSS file?

仅当两个选择器具有相同的特异性时。

如果您只能使用 !important 覆盖您的样式规则，则您的选择器的 css 特异性不够高。示例：

html:

<div class="main"><h1>Test</h1></div>

css:

.main h1 {color: red;}
h1 {color: blue;}

由于 .main h1 比 h1 具有更高的特异性，上面将以红色而不是蓝色显示文本。使用 !import 会起作用，但会被视为不好的做法。而不是使用 !important 你应该在你的 Less 代码中使用具有更高特异性的选择器来覆盖。

例如下面的CSS将解决它（等特异性）：

.main h1 {color: red;}
.main h1 {color: blue;}

可以在以下位置找到特定规则：http://css-tricks.com/specifics-on-css-specificity/

LESS 和 CSS 进口 - 变得疯狂

LESS and CSS Imports - Going Crazy

html

css

import

less

twitter-bootstrap