Sass Introduction and Basics

Sass provides us with valuable advantages in comparison to using vanilla CSS, some of the features which are usually found within programming languages. There is almost no learning curve in picking up Sass as it still remains similar in principle to CSS, and to get us started with sass we've described some of the features available to us.

1. Variables

Sass allows us to define our own custom variables for use throughout the stylesheet(s). This enables us with the ability to reuse global values, ensuring consistency for all elements referencing the variable; whereby updating the variable's value would also update all referencing elements, removing the need to 'Search and Replace'.

In addition by placing styling options within variables, they can be updated easily in the future, enabling the ability to change the theme (i.e. the general colours) of the site. For example:

$background: #fff; $color: #000; $fontSize: 1.2em; $primaryColor: blue; $secondaryColor: gray; body { background-color: $background; color: $color; font-size: $font-size; } button { background-color: $primaryColor; &:hover { background-color: $secondaryColour; } } h1, h2, h2 { color: $primaryColor; }

2. Nesting

Sass allows us to nest our elements together, removing the duplication of code and making future maintenance and changes easier.

.products { .item { a { color: blue; &:hover { color: orange; } &:active { color: gray; } &:visited { color: purple; } } } }

Given the above example, if we were to rename the .products class, you do not need to edit multiple instances. This benefit is greatly enhanced when maintaining a larger site or application. For comparison, to achieve the same results in vanilla CSS the code would be:

.products .item a { color: blue; } .products .item a:hover { color: orange; } .products .item a:active { color: gray; } .products .item a:visited { color: purple; }

3. Mixins

They’re similar to functions/methods found within programming languages. They allow us to reuse the same functionality numerous times within our styling without the need to repeat the same code. For example, here’s a custom mixin we’ve defined and called for use:

@mixin border-radius($px) { -webkit-border-radius: $px; -moz-border-radius: $px; border-radius: $px; } button { @include border-radius(5px); }

The button will now have a border-radius (i.e. a curve) value set of 5px on each corner. When defining mixins, parameters are not essential if you don’t require them. You can still create mixins without parameters, for example:

@mixin my-button-styling { background-color: blue; color: white; border: 1px solid white; } button { @include my-button-styling(); }

Now in your current project I'd like you to build your own Sass variables, nesting, mixins and make use of them. So give styling your site a go using Sass, you can be as creative as you like.

Author(s)

Arif Ullah

Developer & CEO