Go Back

Why Sass is a lifesaver

August 29, 2017

Starting out as a web developer? You may or may not have heard of sass. To those who haven’t, here’s a small sample

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

May look confusing right? Not to worry, SASS is the future! The way it works is it uses a builder (Gulp) to watch your every move… Not as creepy as it sounds, however Gulp will basically build your css for you. With vanilla you probably don’t just stick to the one CSS file for all your code, you probably do tend to seperate some of your CSS where necessary.

This is the bit you’re gonna love.

SASS works by merging multiple css files into one, smart right? That way, your site will only use 1 css file, but in the development side you can make all the files you like!

Using variables

Variables in SASS work just like PHP or Javascript. Why would you need variables in css? Say when you’re building a site, you want a base colour for all your element. For example, my site is a bluey purple colour, so what I do is i set that colour as $primaryColor. There you go! Sass will do the rest, for example if you want the header background as that bluey purple, all you need to do is

background-color:$primary-color;

it might sound confusing, but i can promise you that SASS will be your new best friend in web.

 

if you would like to kickstart your journey in sass, unsure where to start? Feel free to get in touch and I will be more than happy to assist you.

The website really helped kickstart our business Kenneth - Oakley and friends Oakley and friends logo

You provide the vision, I provide the solution

Introduce your project