Compiling LESS and SASS

Visual Studio Code (MAC)

• For LESS - Use the Easy Less plugin for compiling LESS.
• For SASS - Use the Live Sass Compiler for compiling SASS.
  • Make sure that you choose the plugin maintained by Glen Marks as it is more updated. The other one by Ritwick Dey is no longer maintained.
  • Use the settings.json file in your root project folder.
    • For example, if you open a site folder in VS Code, that will be your root folder and the location of the settings.json file (ie: /scripts/scss/settings.json).

Minify css files on MAC

Use Minify extension for VS Code. Open the CSS file in VS Code and hit F1 > Minify and this will minify your css file for you as the other plugins do not natively minify your files and sometimes this is needed.

For Umbraco use, typically the built in client dependency handles bundling and minifying the resource files and we typically just reference the normal css file here. Older sites not using the client dependency will need the css file minified.

Visual Studio (PC)

• Use the Web Compiler plugin for Visual Studio to compile your scripts. This is part of the Web Essentials package.
  • Use the compilerconfig.json and compilerconfig.json.defaults file in the root project folder. For example, if you open a the scripts less/scss folder, that will be your root folder. If you open an entire website, the root of the website will be where you place your config files.

---