Helpers

SACSS does not cover all styles, the following four projects commonly used styles, SACSS provides the corresponding Mixin for the convenience of users.

Here it is recommended to use function-based semantic names, so there is no SACSS naming convention here.

Name	Function
Clearfix	Clears floats of floats
Ellipsis	single line of text beyond the display of ...
Ellipsis-multiple	multi-line text out of display ...
Cell	Fill the remaining space in the floating layout

Note that when you have a uniform naming prefix, it is recommended to add the uniform prefix to the code here as well.

Use

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>