Sass Installation

In this chapter, we mainly introduce the installation and usage of Sass.

NPM Installation

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

npm install -g sass

Note:For users in China, it is recommended to use the Taobao mirror to install npm, refer to:Solving the problem of slow NPM in China

Install on Windows

We can use Windows package managerChocolateyto install:

choco install sass

Install on Mac OS X (Homebrew)

Mac OS can useHomebrewpackage manager to install:

brew install sass/sass/sass

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

Usage Introduction

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

$ sass --version 1.22.12 compiled with dart2js 2.5.0 Next, let's create a example-test.scss file with the following content:

example-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;
}

Then enter the following command in the command line to convert the .scss file into CSS code:

$ sass example-test.scss 
@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

You can add a .css filename after it to save the code to a file:

$ sass example-test.scss example-test.css

This will generate a example-test.css file in the current directory, with the following code:

@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

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

Other Extensions