Sass Installation

This section primarily introduces the installation and usage of Sass.

NPM Installation

We can use npm (NPM Usage Introduction) to install Sass.

npm install -g sass

Note: For npm in China, it is recommended to use the Taobao mirror for installation. Refer to: Solving the Slow NPM Issue in China

Windows Installation

We can use the Windows package manager Chocolatey to install:

choco install sass

Mac OS X (Homebrew) Installation

Mac OS can use the Homebrew package manager to install:

brew install sass/sass/sass

For more installation methods, visit the official website: https://sass-lang.com/install

Usage Introduction

Our tutorial uses the sass installed via npm. After installation, you can check the version:

tutorialpro-test.scss File Code:

/* Define variables and values */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

$ sass tutorialpro-test.scss 
@charset "UTF-8";
/* Define variables and values */
/* Use variables */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

We can append a .css filename to save the code to a file:

$ sass tutorialpro-test.scss tutorialpro-test.css

@charset "UTF-8";
/* Define variables and values */
/* Use variables */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

/*# sourceMappingURL=tutorialpro-test.css.map */