Every website has it's unique front-end design. Whether it is brand-color, text-color, background colors, font-family etc. It is very likely that 'title color of the website is different than it's content color' or the links text color is same as title color.

In CSS, we just need to create the class name which we can be used whenever we need that style.

Let's have a look at these conditions to understand what we are up to.

Case 1:

In CSS we have to write the above condition like this.

.title {
    color: #1266ae
}
.content {
    color: #555
}
nav a {
    color: #1266ae;
}

Yes, we know that the third line of code can be written with the first line of code separated by a comma. like this,

nav a,
.title {
    color: #1266ae
}
.content {
    color: #555
}

But what if we need some extra features in title class.?

.title {
    color: #1266ae, font-size: 24px;
    font-weight: bold;
}

If the above code snippet is the requirement then we have to get back to our first code block as we never like to make our navigation same as the title having font-size:24px.

Case 2:

What if you have almost designed the project and then the client asks to change the text-colors, background, navigation link colors? Yes. It happens so many times in front-end designing. So tie your seat-belt, start to find and replace all that colors and background-color everywhere you possibly have written it.

Using variable in Sass eliminate all that tough and time-consuming job!

In Sass we can define the variable for all that at one place and use it anywhere we need it. Let's have an example to make it clear.

$main-background:$eee;
$content-color:#555;
$links-color:#222;
$link-background:#fff;
$base-font:45px;

.content {
    color: $content-color;
    backgrond: $main-background;
    font-size: $base-font/3;
}
nav {
    background: $link-background;
    a {
        color: $links-color;
        font-size: $base-font/2.8;
    }
}
.title {
    color: $links-color;
    font-size: $base-font-15;
}

Which will compile to 

.content {
    color: #555;
    background: #eee;
    font-size: 16px;
}
nav {
    background: #222;
}
nav a {
    color: #fff;
    font-size: 16.0714286px;
}
.title {
    color: #222;
    font-size: 30px;
}

So, whenever we have any such cases we just need to change the values in the variable we have defined and sass will take care of rest automatically. Pretty good. Huh.?

Sass supports arithmetic operations. We can divide, multiply, subtract, add, calculate modulus. So this becomes savior as we do not have to write exact size of a font, width height etc. For example,

We want to create a div with width 100px, height 80px, padding 5px.

To do so we will write,

$base-width:200px;
$darkgrey: lighten($black, 25%);

.this-div {
    width: $base-width/2;
    height: $base-width/2.5;
    padding: $base-width/20;
}

which is compiled to

.this-div {
    width: 100px;
    height: 80px;
    padding: 5px;
    backgrond: #404040;
}

 

So, days are gone when you need to pick the colors using color-pickers and paste hex-values for every different colors.
We just need to use color functions to adjust and generate variation in colors.

Below are the most common color functions

  • rgb($red, $green, $blue)
  • rgba($red, $green, $blue, $alpha)
  • hsl($hue, $saturation, $lightness
  • lightness($color)
  • lighten($color, $amount)
  • darken($color, $amount)
  • grayscale($color)
  • mix($color1, $color2, [$weight]) etc..

As we can see, using variables in Sass is cool and time-saving. 

The best practice to name variables

  • Always try to use meaningful names which explains it's purpose.
  • Do not make too long or too short variable names. It may create confusion.
  • It is advisable to use project or brand name of the company in variables. For example- Brand-color, brand-tag-line etc..
  • Never use similar variable names like - employee and employees, It will be better to name as employee and all-employee 
  • Always use global languages for naming variables, so that every developer can understand it.
  • Using verbs in the variable is good practice. like for navigation drop-down- has-child, is-active, processed etc..

While naming variables for colors, or borders etc., we should follow something like this

Poor Naming:

$red;
$light-red;
$dark-red;

$border-color;
$link-dark;
$light-color-border;
$highlight;
$link;
$dark-border-color;
$darkest-text-color;

Good Naming:

$link;
$link-dark;

$border-color;
$border-light-color;
$border-dark-color;

$text-color-light;
$text-color-darkest;

As we can see, well structured variable names are easy to find and clear to view. Almost all text-editor eg; Notepad++, Coda, PhpStrom, sublime etc. has auto suggest functionalities which suggest relative phrases as we type. 

So, this will make easy to use variable by just typing '$border' and the editor will suggest all the keywords start with the same name -'border'.

So, remember to name your variables wisely next time.

If you have any issue, let us know in the comment box.

#Sass