Digital marketing that brings

Creativity+Technology

together

Blogs

scss gradient loop2
Jack-Profile-New.jpg

This Halloween, we're diving deep into styling tricks and treats - read on for an advanced technical post all about SCSS!

When using SCSS, there are many shortcuts you can take to help you achieve your goals efficiently. The beauty of SCSS is that you are able to use variables, maps, mixins, functions and loops. This means you are able to complete more complex tasks with your styling than you ever could with plain CSS.

 

Creating Maps

The reason maps are useful is because they are essentially an object of variables. You can store all relevant variables in one object and, when a value is changed, it will be reflected by all instances in the SCSS. For example you can have an object as below:

$colour-palette: (
red: #FF0000;
green: #00FF00;
blue: #0000FF;
);

You will have the ability to access the values of each item in this map by using the built-in SCSS method ‘map-get’, which requires you to add the map name and key name as parameters; the key’s related value will then be returned. You would use this as follows:

#elementID {
background-color: map-get($colour-palette, red);
}

 

Error Handling

When using the map-get function, you must parse the map name and the key name - but what happens if you parse a key that doesn’t exist? You would usually get an error within your compiler and your SCSS would fail to compile properly. I like to combat this with a SCSS function that first checks if the key exists within the map and then either returns the associated value if it exists, or provides an error if it doesn’t. In the function that I am using I log a warning and then return the colour red, therefore indicating an error.

We can do this is as follows:

// Check for existing key in the given map and return an error colour with a useful message if it doesn't exist.
@function safe-map($map, $key) {
@if map-has-key($map, $key) {
@return map-get($map, $key);
}
// Warn the user via the terminal of their issue.
@warn "`#{$key}` does not exist in `#{$map}`.";
// Return red to indicate an error.
@return #FF0000;
}

We have used @warn to log an error which is built into SCSS as well as an @if statement. The built-in method ‘map-has-key’ is also used; this checks for a key within a map and returns 'true' or 'false'. When we log the key or the map parsed in the parameters, we must do so with interpolation.

 

SCSS Loops

SCSS loops have the capability to iterate over each item in a map; you can then use the keys and values as you wish. For example, I have a loop which will iterate over the '$colour-palette' map and creates a class for each colour. The class will have the CSS property ‘background-color’, where the value is the colour value taken from the map. This is an easy way to create multiple classes which have the same CSS, but with a varying value.

The loop looks like so:

@each $colour, $hex in $colour-palette {
.bg-#{$colour} {
background: safe-map($colour-palette, $colour);
}
}

This means that for each of the colours (red, green and blue), a class will be created which will apply that colour to the background of whatever element utilises the class. Each of the class names will be .bg-(colour) for example for red the class would be ‘.bg-red’. Now whenever you add another colour to the map and compile the SCSS to CSS, you will have access to another class of .bg-‘colour' for that entry.

 

SCSS Mixins

A mixin in SCSS is primarily a set of styles that can be imported into the styling of a class or ID without any requirement for inheritance. For example, if we have a mixin that will apply text and background colour like so:

@mixin re-colour($text-colour, $back-colour) {
color: $text-colour; // set text to the parsed colour
background-color: $back-colour // set background to the parsed colour
}

This means you can parse in the colours you want to the mixin and use it in multiple places. You can now use this mixin as below:

.my-element {
@include re-colour(#ff0000, #0000ff);
}

This will turn the text red and the background blue.

In another scenario where you might not want to use parameters and parse a dynamic value, you may want to just have a fixed set of styling rules and have the ability to apply them over multiple classes or IDs. You can do so with mixins but there are also extensions when the styling already exists. With extensions you simply define styling rules, for example:

.extended-class {
font-size: 20px;
letter-spacing: 1px;
color: #4A4A4A;
}
.my-element {
@extend .extended-class;
}
.my-second-element {
@extend .extended-class;
}

.extended-class is now re-usable. You may wonder why you don’t just use .extended-class on the element instead - in this case, you can. However, you may want to add some additional styles to .my-element and use .extended-class just as a base set of styles.

 

IF Statements

The @if directive is most commonly used within mixins and based around the mixins arguments. For example:

@mixin if-tester($element) {
@if $element == water {
color: blue;
} @else if $element == earth {
color: brown;
} @else if $element == wind {
color: transparent;
} @else if $element == fire {
color: orange;
}
}

Based on what you now parse when you call that mixin, the output style for colour will be different. This logic can also be used outside of mixins. A good example of how to use if statements could be that you have a dynamic theme within your SCSS based around the variable $theme - that variable ‘$theme’ may take light or dark. With an if statement you can then, for example, change the colours of the site like so:

body {
@if $theme == dark {
background-colour: #444444;
} @else if $theme == light {
background-colour: #FFFFFF;
} @else {
@error “$theme must be light or dark, it was #{$theme}”;
}
}

SCSS is a very powerful tool for helping you style your website in an efficient manner, using clean, reusable code. I would now only go back to using plain CSS if it was absolutely necessary! If you aren’t already using SCSS and would like to know how, check out this tutorial on setting up Gulp with SCSS.

 

To find out more about how our web development team can apply some styling tricks and treats to your project, please get in touch with us.

Jack Profile New quadra profile jack2
The Team

Jack O'Connor

FIND OUT MORE
Subscribe

Love our blogs?

Get the latest blogs and happenings straight to your inbox!.

love it? you might like these...

We use cookies to give a more efficient and personalised service to users of this website. By clicking 'OK', you agree to our use of cookies during your browsing experience. Please view our Privacy Policy to find out more.

OK