Setting Up Sass

Overview

Before initializing the configuration, I'd first like to provide a brief description of Sass for anyone who isn't familiar with this specific stylesheet language. Sass (Syntactically awesome style sheets) is a CSS preprocessor. It adds additional features such as variables, nested rules and mixins into CSS. Sass allows developers to write code with these features and then compile it into a single CSS file (commonly through this extension). Sass is currently the most popular preprocessor, other well-known css-preprocessors include Less and Stylus.

Configuration

Step 1

1) Create empty folder.
2) Create Index.html file.
3) Generate HTML boilerplate code for Index. If you're using Visual Code Studio simply type "!" and enter. Otherwise, type boilerplate manually or copy this template.
4) Reference CSS file in index.

<link rel="stylesheet" href="css/style.css" />

Step 2

1) Create folder titled "sass".
2) Create main.scss file inside "sass" folder.
3) Insert code into main.scss. Example:

$colors: (
 primary: #005dff,
 accent: #fff6bb,
);

$fonts: (
  primary: arial,
  secondary: verdana,
);


body {
  max-width:1100px;
  height: 100%;
  margin: 0;
  font-family: map-get($fonts, primary);

 a {
   color: map-get($colors, primary);
   text-decoration: none;
   &:hover {
     color: map-get($colors, secondary);
   }
 }
}

Note: We are using three Sass features in the code example: variables, nesting, and "&".

Step 3

1) Compile Sass.

Note: Two popular options for compiling are the Compile Sass NPM Package, and the Live Sass Compiler Visual Code Studio Extension. The following steps pertain to the extension, however, if you decide to use the NPM Package, please follow these instructions.

2) Configure settings. Visual Code Studio settings.json:

"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
  "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  "scss.lint.zeroUnits": "warning",
  "liveServer.settings.donotShowInfoMsg": true

3) Click "Watch Sass" button at the bottom of Visual Code Studio. This will compile our sass code into the style.css file inside of our css folder (which is linked in our Index.html).

Conclusion

We are still using our style.css for our styling needs, however, we aren't writing directly inside the file. Instead we are using our main.scss file to compile our sass code into the style.css file. This allows for a lot more functionality, and ultimately cleaner css with the help of variables, nesting, and functions.

P.S. If you're interested in learning about color functionality with Sass, check out my other blog post.