如果没有表示类，Compass CSS Framework如何制作更清晰的标记？

Question

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

Answer 1

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

举个例子来看一下这个简单的例子：

一些Mixins

@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给我们的另一个是这些mixins，占位符等的完整框架，随时可以使用。

干杯！