Contact Form

Get in Touch

Have A Query or Looking For a Quote? Fill In The Required Fields Below

800

5 Reasons To Switch To Sassy CSS (SCSS)

Scss-infographic-banner

Introduction to Sassy CSS – SCSS

Sassy CSS (SCSS) is an extension of CSS that can simplify your stylesheets! If you find that your stylesheets are complicated and difficult to maintain then this article might be beneficial to you. SCSS includes handy features such as variables, nesting, mixins, inheritance & operators. In this article I am going to cover a few features of SCSS, explain their benefits and give examples of how they can be used in your web design projects.

Scss-infographic

Variables

Variables are a great way to save you time. Unlike regular CSS, with SCSS you can store information you are likely to use over and over again, such as colours & font stocks. The best part of using variables is that if you decide to change one of your values, such as a colour, all you have to do is change the variable’s value and the colour is changed throughout your stylesheet automatically. With variables, you no longer have to search through your CSS and change every value!


/* SCSS */
$primary-color: #29292c;
$secondary-color: red;

article {
  color: $secondary-color;
}
h1 {
  color: $primary-color;
}
footer {
  color: $secondary-color;
}

/* CSS */
article {
  color: red;
}
h1 {
  color: #29292c;
}
footer {
  color: red;
}

Now if you decide you don’t like the secondary colour of your website all you have to do is change the variable:


/* SCSS */
$primary-color: #29292c;
$secondary-color: #f7f7f7;

article {
  color: $secondary-color;
}
h1 {
  color: $primary-color;
}
footer {
   color: $secondary-color;
}

/* CSS */
article {
   color: #f7f7f7;
}
h1 {
   color: #29292c;
}
footer{
   color: #f7f7f7;
}

Nesting

You can nest your CSS selectors in a visual hierarchy. Not only is this easier on the eye but with nesting, there is no need to repeat the parent class. As long as you don’t over-complicate things, nesting will save you from a lot of keystrokes and prevent you from searching through horrible plain CSS. The following code is a simple example of how nesting can be used.


/* SCSS */
.element { 
   color: blue;
   &:hover {
      color: red;
   }
}

/* CSS */
.element {
   color: blue;
}
.element:hover {
   color: red;
}

Partials & Import

Import allows you to break up and compartmentalize your stylesheets. This makes finding and managing your code a breeze. Yes I know, CSS already has an @import feature but SCSS builds on top of this and instead of requiring on HTTP request it will combine the two files. The browser then serves a single CSS file to any visitors of your site.

Firstly you must create a partial; this is done by putting an underscore before the name of the SCSS file. For example, we have our two files:


main.scss

_responsive.scss

We want to use:


@import 'responsive.scss';

This will merge our ‘_responsive.scss’ file with our ‘main.scss’ file.


/* SCSS - Main */
h1 {
   font-family: 'Cinzel', sans-serif;
   font-size: 16px;
}
@import 'responsive.scss';

/* SCSS - _responsive */
@media(max-width: 480px) {
   h1{
     font-size: 12px;
   }
}

/* CSS - Main */
h1 {
   font-family:'Cinzel', sans-serif;
   font-size: 16px;
}
@media(max-width: 480px) {
   h1{
    font-size: 12px;
   }
}

Mixins

c2a-background-website

Expand Your Business


Get an attractive and stylish website for an AFFORDABLE price

FREE QUOTE

Mixins allow you to group CSS declarations that you can use in multiple places throughout your site. You can pass values to mixins making them more flexible. One really good use for a mixin is for browser compatibility and vendor prefixes:


/* SCSS */
@mixin animation($val) {
   -webkit-animation: $val;
   -moz-animation: $val;
   -o-animation: $val;
   animation: $val;
}

.material-icons.spin {
   @include animation(.8s loadingRotation infinite linear);
}

/* CSS */
.material-icons.spin {
   -webkit-animation: 0.8s loadingRotation infinite linear;
   -moz-animation: 0.8s loadingRotation infinite linear;
   -o-animation: 0.8s loadingRotation infinite linear;
   animation: 0.8s loadingRotation infinite linear;
}

Extend & Inheritance

You can use @extend to share CSS properties from one selector to another. This keeps your code neat and tidy and allows for Do Not Repeat (DRY) practice.


/* SCSS */
.colored-div {
   position: relative>;
   display: inline-block;
   height: 3.5em;
   width: 14em;
   padding: 14px 30px;
   box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.15);
}
.orange-div {
   @extend .colored-div;
   background-color: orange;
}

.red-div{
   @extend .colored-div;
   background-color: red;
}

/* CSS */
.colored-div,.orange-div,.red-div{
   position: relative;
   display:inline-block;
   height: 3.5em;
   width: 14em;
   padding: 14px 30px;
   box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.15);
}
.orange-div {
   background-color: orange;
}
.red-div {
   background-color: red;
}

Bonus (Operators)

SCSS has a number of operators such as +, -, *, /, and %. Say you wanted a div element that was double in width than that of the height, an operator would come in handy. If you ever changed the height variable the width would remain double the height.


/* SCSS */
$standard-height: 200px;
.colored-div {
   position: relative;
   display: inline-block;
   padding: 14px 30px;
   height: $standard-height;
   width: $standard-height * 2;
}

/* CSS */
.colored-div {
   position: relative;
   display: inline-block;
   padding: 14px 30px;
   height: 200px;
   width: 400px;
}

Summary

Since I started using SCSS, I haven’t gone back to plain CSS and I doubt you will either! It is a fantastic extension to CSS and fully compatible. This makes it easy to learn new features at your own pace. A lot of text editors have extensions you can install so that when you save a change to one of your SCSS files it will automatically process and output your CSS file. Alternatively, you can use one of the following solutions to process your SCSS. Now you know the basics of SCSS, give it a try!

Leave a Reply

Your e-mail address will not be published. Required fields are marked *