CSS class "macro"

Question

我是一名网络前端开发人员（新手）。

假设，如果我正在使用 Twitter Bootstrap 为网页编写代码并想要响应式侧边栏，我可以这样做：

<div class="col-xs-12 col-md-3">...</div>

比方说，为了关注点分离，我希望设计人员决定在每个屏幕宽度上侧边栏应该有多少列宽。

这样做不是更好吗:

<div class="sidebar">...</div>

让设计师做这样的事情：

sidebar = col-xs-12 col-md-3

在 CSS 的某个地方？

这可能吗？有没有工具可以做到这一点？我偏离基地了吗？

Answer 1

这是可能的，需要 CSS preprocessor 的一些帮助，如下所示：

Sass
- .sidebar { @extends .col-xs-12; @extends .col-md-3; }
Less
- .sidebar { &:extend(.col-xs-12); &:extend(.col-md-3); }

希望对您有所帮助！

Answer 2

您提议而不是在 html 中用 div 上的 class 确定它，像这样：

<div class="col-xs-12 col-md-3">...</div>

在 css 中用这样的东西确定它：

.sidebar {
  width: 100%;
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    width: 50%;
  }
  @media (min-width: $screen-md-min) {
    width: 33%;
  }
}

在任何情况下你都必须编辑一些东西：html 文件或 css 文件。考虑你的项目，知道哪个更容易。

我建议将列放入 html（这是一种默认情况）

<div class="sidebar col-xs-12 col-md-3">...</div>

然后，如果需要，用类似这样的内容覆盖 css 中的特定页面：

.page-order .sidebar {
     width: 33%;
}

Answer 3

您应该使用预处理器编译您的 CSS，并从单元 classes 创建语义 class。

例如 Sass:

.sidebar {
    @extends .col-xs-12;
    @extends .col-md-3;
}

您可以在 the offical website 上的 Sass 下载 Bootstrap。

你可以阅读文章"Using Sass To Semantically @extend Bootstrap"，它可以帮助你实现你想要的。

CSS class "macro"

CSS class "macro"

css

macros

separation-of-concerns