I love SCSS. But getting me to jump ship initially from standard CSS was difficult. Why did I need to change from the lovely CSS?! How the hell do I set it up? Like many things, once you get your head round it you realise just how simple it really was.

Both Sass and SCSS are CSS preprocessors, meaning they process a file into a valid CSS file. They do sim ilar things but the file you write before processing is where the difference lays, let’s take a quick look at the two different writing style:

Sass (Syntactically Awesome Stylesheets) looks like this:


.container
  width: 100%

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

SCSS (Sassy CSS) looks like this:


.container { width: 100%; }


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

Now don’t panic!

Sass doesnt have brackets and is quite hellish different to the regular old CSS, where as SCSS looks pretty much identical. For this reason, if you’re going from CSS to a preprocessor and are worried, go for SCSS. You can literally do a CSS as normal and SCSS will process it. You’d miss out on the majority of the features but it’s still good to know you have a safety net in place!

OK, so you’re decided to take the dive, tentatively you say you want to try SCSS on a quick project to try it out. How do you being? Don’t you need Grunt and all that other scary stuff?

No. To this day I use Prepros. It’s free and nagware (every so often it’ll nag you about buying a license for non nag edition like Sublime) and it simply runs, keeping watch on a file directory you choose for a SCSS file and will automatically process it when you save the SCSS file. It’s really easy and straight forward! Seriously, it’s like less than a minute to setup and you can start coding away.

SCSS Typical WordPress Setup (at least for me)

I have a CSS folder in my theme root. Inside a file called styler.scss. I boot up Prepros, ‘Add Project’ navigate to the CSS folder and select it. Prepros will then show the contents of that folder, click the styler.scss and these are the settings I use:

scss-setup

It’s then a good idea to right click the CSS folder on the left panel and change the project name in ‘Project Options.’ All these settings will be explained in another post, but hopefully that should get you started!

Leave a Reply