Using SASS/SCSS

We use SASS to write modern and modular CSS code.

Structure

SASS files (.scss) are usually stored in the assets/sass/ folder of the plugin/theme. We usually use a main bootstrapping files (usually named style.scss for themes and plugin-xxx.scss for plugins). And this file usually only contains @import commands to partial files.

We use node-sass and npm scripts to compile SASS files into CSS. For themes the style.css is compiled and placed at the root of the theme folder where WordPress is expecting it to be. For plugins the compiled file is placed in /assets/css.

Examples can be found here: https://github.com/HarvardChanSchool/dev-resources/tree/master/WordPress/Boilerplates

How to compile

Requirements: You will to have node and npm installed on your machine.

If this the first time you are compiling the assets use `npm install` to install node-sass.

Then simply run `npm run sass` to compile your SASS in CSS files.