Usefull sass @mixins for your toolbox

SASS and other CSS preprocessors like LESS or Stylus are incredibly powerful tools to write faster, better and cleaner code. Some good reasons to use a preprocessor are: DRY (dont repeat yourself) code, timesaving (especially with big projects). easier to maintain code and having organized code.

What are SASS mixins, well a Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site. So these blocks lets us write DRY code which saves us a lot of time.

Below are some basic mixins from my own toolbox. As you can see I do use a lot of mixins to replace vendor prefixes. I will update this list from in time as my own mixin toolbox will grow.

 

Square

A simple mixin which outputs height and width.

 

Rem (modified version)

This mixin transforms px units to REM units with px fallback for unsupported browsers.

 

Border radius

Mixin which outputs border radius in all vendor prefixes.

 

Push auto

Mixin which centers an element.

 

Transition

Mixin which outputs transition in all vendor prefixes.

 

Triangle

Mixin which outputs a css triangle.

 

Boxshadow

Mixin which outputs boxshadow in all vendor prefixes.

 

Transform

Mixin which outputs transform in all vendor prefixes.

 

No comments found for “Usefull sass @mixins for your toolbox”
Leave a Reply

Your email address will not be published. Required fields are marked *