Goodbye CSS, Hello SCSS

SCSS (Sassy CSS) has been around for a long time now, along with its older version SASS. But I never got into it… until now!

SCSS is like CSS with better formatting

SCSS is sort of a different kind of CSS. It’s similar code and achieves the same effect, but it uses much better and more awesome formatting! For example, let’s look at some CSS:

Formatting in CSS

#my_div {
	border: 3px double white;
	color: #ff7878;
}

#my_div h2 {
	border: 3px double #ff7878;
	color: white;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 30px;
	font-weight: 300;
}

Here are a few pointers from the above:

  • You have to manually type in hex/colour values each time.
  • Whenever you want to target an element inside another, you have to enter the class/ID of the parent element in front. So to target the h2 element inside #my_div, you do that by writing #mydiv h2

Formatting in SCSS

Here’s the exact same code, but in SCSS:

$pink: #ff7878;
$opensans: 'Open Sans', Arial, sans-serif;

#my_div {
	border: 3px double white;
	color: $pink;
	
	h2 {
		color: white;
		font: {
			family: $opensans;
			size: 30px;
			weight: 300;
		}
	}
}

Here are a few differences:

  • You can create variables. So you can set your $pink colour to #ff7878 and enter it whenever you use pink. What’s cool about this? If you want to adjust the shade of pink later, you only have to edit the variable and it will automatically apply everywhere the variable is used. No more find and replace!
  • You can nest your selectors. So to target the h2 element inside #my_div I don’t have to write #my_div h2. Instead, I put the selector for h2 inside the brackets for #my_div.

You can even create functions

Have you ever used border-radius? Or box-shadow? How freaking annoying is it to write this out every time?

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

In order to make coding easier and faster, you can create a function to generate this automatically and then mix it in later. For example:

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

#my_div {
	@include border-radius(20px);
}

I’ve created the border-radius function to accept a radius parameter. Then, when targeting #my_div, I just say: include the border-radius function, using a value of 20px. Then it basically includes everything inside the border-radius function, using 20px as the value. I can reuse this function as many times as I want, all throughout my code!

You can even do math!

Here’s an awesome example from the SCSS documentation:

SCSS syntax

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Converted into CSS

Using the above SCSS code translates into this CSS:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

So you actually use math inside your CSS, and it calculates it out for you!

And that’s just the beginning…

I can’t believe it took me so long to switch to SCSS. It makes coding so much faster and cleaner. I used SCSS for a few designs then had to switch back to normal CSS for one project, and it felt like a huge chore! It suddenly just seemed so tedious, repetitive, and slow.

That being said, SCSS isn’t simple to set up

I think this is why I didn’t use SCSS for so long. I never quite understood how to use it (which seems silly now). The thing is, SCSS isn’t just something you can type into your text editor. This is because SCSS isn’t code you put on the website; you write in SCSS and then convert that to CSS. So in the end, you still use CSS, it’s just that you get to write your code in a different language at first.

If you’re interested in trying SCSS, you can read about ways to install SCSS. I personally use PhpStorm so I used JetBrains’s guide for transpiling SCSS to CSS. So now, I use SCSS in my style.scss file and every time I click “save”, PhpStorm automatically converts that into CSS in a matching style.css file. Nifty!

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

16 comments

    1. Yeah it’s really fantastic! It makes it soooo insanely easy to change your whole design’s colour scheme. Instead of doing about 10 find + replaces, all you have to do is change the variables you set and then it changes everything! It’s incredibly useful. πŸ™‚

  1. Wow, I never heard of this but I like the looks of it. I miss CSS right now. All this PHP and JavaScript from school is hurting my brain. I am trying to figure out the code to find the diagonal of a rectangle with JavaScript. It’s a challenge our teacher gave us just to see if we can get it. Funny thing is, the teacher admitted he doesn’t know it. Seriously!!??

    1. What the hell!! You’re paying for this and the teacher doesn’t even know how to teach you?? X_X

    1. Similar thing here! I think I was just so confused about what it was. I kept hearing about how you have to install Ruby and how it’s not really a CSS alternative, but it’s a pre-processer. I think I just didn’t get it, you know? And although it’s not actually super hard to set up, it sounds a bit confusing.

      But SCSS really came in handy with my latest pre-made theme, which has 9 different colour schemes. Normally that would mean 9 different stylesheets, all containing the same code but with different colours, right? Then if I want to add/change/remove something, I have to edit all 9 files… It sounded sucky.

      But with SCSS I just create ONE function that takes in the primary colour (and any secondary colours) as a parameter. Then I have 9 different CSS classes, like .scheme-red or whatever. And in my SCSS I just have:

      @mixin colour_scheme($primary, $secondary) {
          body {
              background: $primary;
          }
          /* All other CSS rules here */
      }
      
      .scheme-red {
          @include colour_scheme(#c75d60, #b1474a);
      }
      .scheme-blue {
          @include colour_scheme(#a7adbe, #949aaa, #eff1f6, #ced1da);
      }

      Then the colours I want get inserted into the function and included under that class. It makes it so much cleaner, easier, and there’s a lot less code. LOOOOVE!!!

  2. This seems really interesting! I love the idea of setting up the colors as variables, that would make changing the colors throughout a design SO FREAKIN EASY! I’m def going to have to look into this! πŸ™‚

    Anna recently posted: Development? No, Thank You.
  3. Pingback: SCSS | .Net Notion

Recent Posts

    Random Posts