Sass - Variables and Mixins and Functions! Oh my!

CSS Preprocessors

What are they?

CSS preprocessors let us write CSS rules in a structured way which get converted to pure CSS by any compiler or loader.

CSS Preprocessors compile the code which is written using a special compiler. Browsers don't understand SASS so they need it translated into CSS.

Once compiled they then use that to create a CSS file, which can then be referenced by the main HTML document.

Benefits of using them

Preprocessors let us write more flexible styles by using variables, functions, conditional statements that make our development easier.
We can join multiple stylesheets into one by importing all of them into the main CSS file. This allows us to organise our files to keep on top of CSS for large projects.
Repetition can be avoided by writing the common rules together and using that as a mixin or function.
Darken and Lighten functionality to create night mode to completely change up your website at a click of a button.

All of these features help us to write CSS with less effort and time but efficiently.

Some, such as SASS, has specific style standards which are meant to make the writing of the document even easier, such as the freedom to omit braces if you want.

SASS ( Syntactically-awesome style sheets)

This appears to be the most popular choice for developers, it was first written in Ruby and then other languages.

How to use Sass

There are many tutorials available to get a feel of using SASS.

If you would like to learn without using an automatic compiler you could use:

How to use Sass - Step by Step guide - (Between 1 and 2 hours)

For an in-depth look into SASS with using an automatic compiler:

Sass Tutorial for Beginners - (2 hour video plus coding time. I would recommend putting aside half a day)*

SASS Tutorial - Net Ninja Course - 1 hour video plus coding time. This is my favourite tutorial)*

How to install

Install node-sass

In terminal install globally

npm install node-sass -g

Create:

Folder: SASS-Demo
File in folder: index.html
File in folder: style.scss

Dont forget to link the style file to html 😊

Then add

<body>

<div>

<h1> Sass Demo</h1>

<button class="save"> Save </button>

<button class="cancel"> Cancel </button>

</div>

</body>

Variables

Variables help you centralize CSS properties. You can assign them once at the top of a file and use them throughout the file. These variables are like placeholders for a CSS property’s value. In Sass, a variable name must start with a $ sign.

Create in style.css file $h1-color and $h1-height variables.

$h1-color : blue;

$h1-height : 50px;

h1{

color : $h1-color;

height : $h1-height;

}

Open terminal in the demo folder and execute

node-sass style.scss style.css

This will create a style.scss file

You can then open the index.html in browser

Operators

Sass provides basic math operators like addition +, subtraction -, multiplication * and division/.

You can use variables and operators together to manipulate CSS properties.


$h1-color : blue;

$h1-font : 50px;

$div-width : 500px;


div{

width: $div-width;

}

h1{

color : $h1-color;

height : $h1-font;

padding : $div-width / 10;

}

Mixins

Mixins group related properties and can be reused in style blocks. They can pass variables.

@mixin border-radius($radius){

-webkit-border-radius : $radius;  

-moz-border-radius : $radius;  

-ms-border-radius : $radius;

border-radius : $radius;

}


div{

width : $div-width;

border : 2px solid grey;

@include border-radius(20px);

}

Here we used the @mixin directive to define a mixin named border-radius. This mixin contains all the possible properties to set the radius of a border. We also passed a parameter to this mixin. Whenever you need to set the radius of an element, include this mixin with the @include keyword.

To apply these changes you have to compile the script once again

node-sass style.scss style.css

Nesting

You can nest selectors to apply classes using hover, focus and active

div{

>h1{

color: blue;

&:hover{

color: greenyellow;

}

}

}

Inheritance

We can create a parent style for items that share most of their characteristics such as padding, font-size, margin.


%common-button{


padding: 16px 8px; 

border: none;

font-size: 18px;

}


.save{ 

@extend %common-button;


background-color: blue; 

color: white;

}


.cancel{

@extend %common-button;

background-color: goldenrod;

color: white;

}

To declare a parent style, use the % sign. Use the @extend directive to inherit a child block.

Import

Sass can create partial files to create small modular Sass files to make files more organised and easier to maintain

The naming convention for partial files is to prefix the file name with an underscore _.

Create a file called _buttonpartial.scss

then use



@import '_buttonpartial';

h1{

color:blue;

}

In the root Sass script

Loop

Iteration is one of the most frequently used programming mechanisms. Sass script allows you to iterate over variables. You can use various directives like @for, @each and @while.

$totalButton: 2;


@for $i from 1 through $totalButton{

.button-#{$i} {

width: 50px * $i;

height: 120px / $i;

}


}

Stop needing to compile everytime!

There is a fancy way to avoid repetitive compiling: a task runner. Visual Studio Code has a built-in task runner, but you can use any task runner of your choice. Gulp is another popular task runner. For compiling Sass script with Gulp, you would need gulp sass compiler instead.

Gulp-Sass

Or you can download PrePros

Set up instructions can be found here: (How to set up React and Sass using Prepros)
https://dev.to/nass84/how-to-set-up-react-and-sass-using-prepros-22m1