SCSS Mixins and snippets you must use in all projects

We all should accept css preprocessors like scss/less makes our(developer) life easier. Variables and nestings helps us to maintain a quality code and we are not yet using the most powerful feature of all MIXINS.

Mixins are really helpful in lot of ways. But when to use mixin is the key and if you are creating a mixin. you must follow the golden rule.

Mixins without arguments are bad

Here are the few mixins that can be used in all projects.

1.Ellipsis

Adding a ellipis to your website text is not simple. but when you have this handy mixin you just need to include the mixin with the number of lines as a argument.

@include text-shorten(2);

For single line ellipsis you have to pass null.

@include text-shorten(null);

Note : Line clamp is not supported in internet explorer.Don’t use if you are supporting IE 11 or below.

See the Pen @mixin ellipsis by yogeshwaran
(@yoyo) on CodePen.

2.Linear gradients

Linear gradients are fancy and adding all those syntax with fallback is little tricky.

See the Pen wvazwjd by yogeshwaran
(@yoyo) on CodePen.

3.Generate dynamic classes for icon fonts

If you are using custom iconfont like icomoon you may require to use the classes generated from the iconfont generator. instead you can add all icons in a key value pair and use @each function in scss to create icon classes and add the respective unicode to them.

Click view compiled to see the compiled css results.

See the Pen Dynamically generate icon font classes in scss by yogeshwaran
(@yoyo) on CodePen.