Sass

As part of my need to expand my technical knowledge into all things code. Learning new ways to do things is part and parcel of every developers life. That being said, the hardest part of keeping on top of new things, is actually installing them on your computer in the first place.

If you’re like me and completely new to coding, you’re probably used to using simple css. And like me, when you work on your projects, you like to separate each style sheet according to the section you’re working on.

After a while, you end up with a lot of <link rel=”stylesheet” type=”text/css” href=”css/***.css”> at the top of your index file. At one point I had 9 different stylesheets linked to my index file – clearly this is very messy. I then learnt that you can consolidate your many stylesheets into 1 and then link that to your index file like so:

For example:

styles.css

@import “intro.css”;
@import “biography.css”;
@import “footer.css”;
etc…

index.html

<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>

For me that was a life saver – but then, I realised that when I was styling my website, I needed to use the same colours here there and everywhere. This can get tedious when you have to remember the same hex code or hsl (hue, saturation and lightness). Which can be tedious.

Sass – a brief introduction

Sass stands for synctatically awesome stylesheets – so what’s the big deal?

Sass (for the newbies) is a simplified way of styling your website. The three main things I like using sass for are:

  1. Variables – for example, you want to change colour throughout your whole site but would need to sift through all the lines of css and change each colour individually. Fear not, as with sass, you would only need to change these once.
  2. Nesting – allows you to style your page as you set it out in the html so that it’s clearly structured (good for those of you who like things done in an orderly fashion).
  3. Import – like css you can use the @import feature to consolidate the stylesheets into 1 css file at the top of your index file however this serves many css files in the web browser. With sass, you only serve 1 css file – how easy?!

Installing sass

This was the tricky part for me. I use windows 10 – and I spent the past 2 days trying to figure out how to get it on my computer. Youtube videos and forums weren’t really helpful until I found this guy!

Ricardo Zea – who is a full-stack designer and the only person I found online who gave me a step-by-step guide on how to install sass on windows.

Check out his guide here

And finally I managed to get it to work and have been playing with it ever since.

View story at Medium.com

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s