组件

项目中各种通用的 UI 组件的示例

工具

一些具备辅助功能的非组件性质的类

使目标元素保持固定的宽高比例，无论如何缩放都不会变。

需要写额外的代码指定元素的宽高比例，可以通过引入 mixin _aspect-ratio(width, height) 来实现。

<!-- HTML -->

<div class="u-aspectRatio">
  <!-- .u-fillUp 的作用是使图片撑满容器 -->
  <img src="http://placehold.it/300x200" class="u-fillUp">
</div>

// Sass

.u-aspectRatio:before {
  // 参数可以是宽高的具体数值，也可以是比例
  @include _aspect-ratio(300px, 200px);
}

<!-- HTML -->

<div class="u-aspectRatio">
  <a href="#">
    <img src="http://placehold.it/300x200" class="u-fillUp">
  </a>
</div>