How to use Sass with Visual Studio Code

Visual Studio Code on Macbook

Image courtesy of Clément H

You’ll have heard me countlessly bang on about how much I love Sass but what you might now know is that you can start using Sass today, for free!

Sass has revolutionised the way in which I develop websites and I urge any budding web developer to jump right on in. Check out my post on Modular Web Design to see how Sass can make your life much easier when converting artwork into code #plug.

Sass is an extension of CSS that allows you to create variables, set up functions, nest elements and split your code into separate files. The thing is, browsers can’t read Sass files so Sass needs to be compiled before it can be read properly by the browser. Sass compilation means to turn your Sass files into browser-readable .css ones.

The good news is that this can be done automatically! You may opt to use apps such as Codekit (personal preference of mine – Mac only) or Prepros but Visual Studio Code can be set up to do all of this from within the editor. It’s free, it’s easy and this is how to get it working:

Download and install Visual Studio Code

  1. Obvious, I know, but first, you’ll need to head over to https://code.visualstudio.com/ and download the latest stable build. The great thing about Visual Studio Code is that it works on Mac, Windows and Linux so nobody is left out.
  2. Once you’ve downloaded VSC, open the .exe or .dmg file and follow the installation instructions.

Setting up Visual Studio Code

  1. Open up Visual Studio Code (if it’s not already) and look to the lefthand menu.
  2. You’ll need to click on the icon containing four squares, this opens the Extensions tab. Visual Studio Code extension icon
  3. Once open, use the search field at the top of the tab to look for “Live Sass Compiler”

or visit this URL https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

In both cases, you’ll need to click the green “Install” button to install the extension.

Setting up the extension

For this step, it’s worth opening a new project. If you don’t have one, feel free to download my Simple Sass Project as a starting point.

  1. Now that you’ve got the extension installed, you’ll need to click on the settings icon at the bottom of the lefthand menu in Visual Studio Code. Visual Studio Code settings icon
  2. Click on “Settings” within the pop-up dialogue box that appears.
  3. Visual Studio Code allows you to change your settings scope from User (Global) to Workspace (Project) (assuming you’ve opened a Project). For now, you can leave the tab set to User.
  4. Look in the lefthand list of the settings window and expand the “Extensions” tab.
  5. Now look for “Live Sass Compile Config” in the extensions list and click it.
  6. Under the first option, you’ll see a link to “Edit in settings.json”, click that and a new tab will open.
  7. It’s here where you’ll need to add your custom settings for the Sass compiler. This is completely optional, but it’s well worth looking at the documentation to see what can be done here. https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
Visual Studio Code settings screen

Optional: My default settings

I like to separate my SCSS files from my CSS files so I use the following file structure:

assets/css/style.css
assets/scss/style.scss

By default, the extension will generate .css files to sit alongside the sass/scss files so I need to add the following to my settings.json:

"liveSassCompile.settings.formats":[
    {
        "format": "expanded", 
        "extensionName": ".css",
        "savePath": "~/../css/"
    }
],

The above code snippet sits within the main curly braces of the settings.json file

The important bit here is savePath which is using the tilde (~) to reference all Sass (sass/scss) files and then places the compiled file one directory up from them (..) and into a /css directory.

The format can be left as expanded whilst you develop your site but I’d recommend changing this to compressed when you’re ready to go live (gotta save those kilobits!). You can also change the extensionName to .min.css in conjunction with the compressed format.

I’m also quite lazy so adding the following snippet of code will automatically add and remove prefixes where required. This is great for getting rid of unused -moz and -webkit prefixes too, further saving on the overall compiled file size.

"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],

Compile some Sass

Now that you’ve got everything set up, it’s time to test it.

  1. Open up your project, if you’ve not done so already, and then look to the bottom right of the Visual Studio Code editor.
  2. You’ll now see a link labelled “Watch Sass”. Click it!

The Live Sass Compiler will run through your Sass files and do its thing. One it’s finished working you’ll hopefully see a success message similar to:

Compiling Sass/Scss Files: 
/path/to/scss/style.scss
--------------------
Generated :
/path/to/css/style.css

Hoorah! You’ve made some CSS from Sass!

The great thing about the Live Sass Compiler extension is that as long as you keep your project open, it’ll keep watching for changes to your Sass files and compile them for you when any changes are saved. But remember. Whenever you switch projects or close Visual Studio Code you must click on the “Watch Sass” link!!

The other great thing about the extension is that it’s very good at highlighting errors so if you do run into any problems, you’ll be greeted to a message similar to:

Compilation Error
Error: Invalid CSS after ".test": expected "{", was ""
        on line 1 of /path/to/scss/blocks/_test.scss
        from line 22 of /path/to/scss/style.scss
>> .test
   ^

That’s a wrap

And there we have it. A quick setup guide to using Sass with Visual Studio Code. Give me a shout if you run into any problems but otherwise, happy coding!

Related

The GameCube is the best console ever made. Don't @ me.

© Kieran McClung, 2019 Privacy & Cookies