Version 3.4.22

SASS examples

In this code example, I'll show you how to use the features extend, mixins and include.

There are other tools that you can use, but for me, I think Grunt is excellent and is used for all CSS examples used in this example.

Here I create a new sass file called _colour.scss and add any colours that the site requires.

SASS Mixins

Create another file for my mixins called _mixins.scss.

This example takes a div which has a border-radius, instead of needing to remember what all of the properties are; you can create a mixin that takes parameters that you can pass the values to and then reuse the same code again and again.


In this short blog, I showed how you could use SASS to create CSS; the examples just scraped the surface of what can be achieved with SASS. If you have any comments about this post, then please use the form below.

Leave a comment