css - Compass CSS 框架如何在没有展示类的情况下制作更清晰的标记？

Question

在他们的网站上，第一个功能是“体验没有演示类的更清晰的标记。”，他们如何解决这个问题？

Answer 1

如果您已经单独使用 SASS，我认为 Compass 必须免费提供才能让我们创建更清晰和语义化的标记。

举个例子：

一些混合

@mixin box {
  display: block;
}

@mixin sized_box($width:auto, $height:auto) {
  @include box;
  width: $width;
  height: $height;
}

@mixin floated_box($direction:none, $width:auto, $height:auto) {
  @include sized_box($width, $height);
  float: $direction;
}

@mixin left_box($width:auto, $height:auto) {
  @include floated_box(left, $width, $height);
}

@mixin right_box($width:auto, $height:auto) {
  @include floated_box(right, $width, $height);
}

占位符

// divs will be red
div%colored_floating {
  @include left_box;
  background-color: #ff0000;
}
// paragraphs will be blue
p%colored_floating {
  @include right_box;
  background-color: #0000ff;
}

我们的样式表

// if #some.selector * turns out to be a div it will be red, 
// and if it is a paragraph it will be blue
#some.selector *{
  @extend %colored_floating;
}

最后在你的标记上，你不需要任何演示类

当然，那些使占位符更具体的除外。

 <section id="some" class="selector">
   <div>This will float and it will be red</div>
   <p>But this will float right and will be blue</p>
 </section>

你总是可以这样做：

// to make the placeholders absolutely generic to the whole markup, 
* {
  @extend %colored_floating;
}

再次对这个非常微不足道的例子感到抱歉，但希望它能让您了解如何摆脱标记上的表示类，以纯语义内容为目标。

Compass 还给我们提供了一个包含这些 mixin、占位符等的完整框架，可以随时使用。

干杯!