Skip to main content

Sass

Intro​

  • Sass is an extension to CSS

Course​

Setup​

  • Sass files cannot be used directly

  • Include compiled styles.css in index.html

    • <link rel="stylesheet" href="styles.css">

  • VS Code

    • Install Live Sass Compiler extension
    • Click on Watch Sass button in the bottom bar
    • Extension will convert ALL .scss files into corresponding .css files

  • npm

    • Install sass globally or use npx to compile .scss or .sass into .css file
    • Global
      • npm i -g sass
      • sass styles.scss styles.css
    • npx
      • npx sass styles.scss styles.css

  • node-sass

  • React Setup

  • Next Setup

  • Angular Setup

Overview​