sass-mixins-kit v0.1.1

Sass-Mixins-Kit

A bunch of useful sass/scss mixins that help you write sass/scss faster.

Usage

1. Install via NPM:

   npm install sass-mixins-kit --save

2. Include Sass-Mixins-Kit in your sass file, remember the path must be relative:

   @import '../node_modules/sass-mixins-kit/sass-mixins-kit';

Mixins

1. clearfix

   A clearfix hack. A way for an element to automatically clear its child elements.

   Before using this mixin, I recommend you to try Flexbox Layout or display: inline first. They are better solutions.

   ul {
       @include clearfix();
       
       li {
           float: left;
       }
   }

2. text-ellipsis

   Display an ellipsis('...') at the end of overflowed texts.

   Only available in block or inline-block elements. A specific width is needed.

   span {
       display: block;
       width: 100px;
       @include text-ellipsis();
   }

3. user-select($value: none)

   Add vendor prefixes to user-select property.

   Most of the time I don't add vendor prefixes in this "sass-mixin" way because PostCSS can do it for me. But it is weird that PostCSS don't add vendor prefixes to 'user-select' property. So I have to add vendor prefixies myself.

   span {
       @include user-select();
   }

   will complie to

   span {
       -moz-user-select: none;
       -ms-user-select: none;
       -webkit-user-select: none;
       user-select: none;
   }

   This mixin accepts a param and its value (default none) will be applied to the 'user-select' property.

License

MIT