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这样的类来确定它：

<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，并从单元类创建语义类。

例如Sass：

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

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

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

CSS类＆＃34;宏＆＃34;

3 个答案: