辅助方法

SACSS 并不能覆盖所有的样式，以下四个项目常用的样式，SACSS 提供了对应的 Mixin，方便用户使用。

这里推荐使用基于功能的语义化名称，所以这里并不具有 SACSS 命名规范。

名称	功能
Clearfix	清除 float 的浮动
Ellipsis	单行文本超出显示...
Ellipsis-multiple	多行文本超出显示 ...
Cell	在浮动布局中撑满剩余空间

需要注意的是，当你有统一的命名前缀的时候，建议这里的代码也添加上统一前缀。

使用

Life was like a box of chocolates. You never know what you're going to get.

Life was like a box of chocolates. You never know what you're going to get. Life was like a box of chocolates. You never know what you're going to get.

Float-left

Life was like a box of chocolates. You never know what you're going to get.

LESS

@import 'sacss/less/Helpers';

.clearfix{ #Clearfix; }

.ellipsis{ #Ellipsis; }

.cell{ #Cell; }

.ellipsis-mul{ #Ellipsis-multiple; }

.ellipsis-mul._2{ -webkit-line-clamp: 2; }

SASS

@import 'sacss/sass/Helpers';

.clearfix{ @include Clearfix; }

.ellipsis{ @include Ellipsis; }

.cell{ @include Cell; }

.ellipsis-mul{ @include Ellipsis-multiple; }

.ellipsis-mul._2{ -webkit-line-clamp: 2; }

HTML

<div class="fs12 lh16 ellipsis">

Life was like a box of chocolates. You never know what you're going to get.

</div>

<div class="fs12 lh16 ellipsis-mul _2">

Life was like a box of chocolates. You never know what you're going to get.

</div>

<div class="clearfix">

<div class="fl mr16">float-left</div>

<div class="cell">Life was like a box of chocolates. You never know what you're going to get.</div>

</div>