Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted November 13th, 2015
SASS variables and mixins

When styling your HTML with CSS, how many times did you already have the problem that you use a color but later you change it to a slightly lighter color. And then you need to change your color everywhere in your code. Or everytime you need the color you need to look up the hex code for your color again. And when the design of the website uses a lot of border radius’s you have to repeat it time after time. Every time again multiple lines of code for just a simple border radius that you use quiet often.

For the problems above they invented SASS and within SASS there are 2 useful functions for the problems or irritations that I mentioned before. With SASS you have the possibility to make variables that are the same everywhere or you can use a mixin to include code that you use quiet often.

Variables

Let’s say that you have a website where you use #875aa4 as a color often. Every time when your styling an element where you need to use this color you type it again: background-color: #875aa4; every time you need to look the color code up again. So what if I tell you that with SASS you can reuse this easily.

Within your SASS file you do the following:

$purple: #875aa4;

Here the $ sign represents a variable that you can later reuse. So whenever you now need the purple color for an element color, link color, border color, etc. you can simply use:

background-color: $purple;

Then when the CSS is generated from the SCSS file this will be the output:

background-color: #875aa4;

Now you can easily style your code without alt/cmd tapping all the time to your Photoshop file to lookup the color code.

Mixins

Above I also mentioned another problem witch will make your SCSS file pretty long. Whenever your website uses a lot of borders with a radius of lets say 6px. You will need to copy paste the following code quiet often:

-webkit-border-radius: 6px;
moz-border-radius: 6px;
ms-border-radius: 6px;
border-radius: 6px;

So every time you have a element that needs a 6px border radius you need to type that line of code again. Now also for this problem/irritation SASS comes to the rescue.

Within your SASS file you use the following code:

@mixin border-radius {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
}

Now whenever you have a element that has a border radius of 6px you can style it like this:

.navigation {
    @include border-radius;
    background-color: $purple;
    border: 1px solid black;
}

When the code above will be merged to a style.css file it will have the following output:

.navigation {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    background-color: #875aa4;
    border: 1px solid black;
}

As you can see you can easily reuse the code for the border radius every time you need this on an element. But with this you are always stuck to the 6px border radius. This is fine of course when you always need the 6px radius but whenever you have different sizes of border radius’s over your website you can also use a variable in a mixin.

Let’s say you have a design where there are a lot of different border radius’s. That means that when your using the code above you still need to type this code over and over again. Here you can use a variable in the mixin and that looks like this:

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

Now when your going to use the mixin you can decide the amount of pixels on the border radius within the brackets:

.navigation {
    @include border-radius(10px);
    background-color: $purple;
    border: 1px solid black;
}

This will result in this when it’s compiled to style.css:

.navigation {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    background-color: #875aa4;
    border: 1px solid black;
}

As you can see you can decide the amount of pixels for the border radius between the brackets. This way you can easily add a border radius and even decide the amount of pixels that you want to apply on the border radius in just 1 line.

Posted by Alex Lagendijk

Leave a Reply

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