Sass installation

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

NPM installation

We can use it. npm (introduction to NPM usage) to install Sass.

npm install -g sass

Note: domestic npm is recommended to use Taobao image to install

Install on Windows

We can use Windows’s package manager Chocolatey to install:

choco install sass

Mac OS X (Homebrew) installation

Mac OS can be used Homebrew package Manager to install:

brew install sass/sass/sass

More installation methods can be found on the official website: https://sass-lang.com/install

Introduction to use

Our tutorial uses npm for the installed sass, you can view the version after the installation is complete:

$sass– version 1.22.12 compiled with dart2js 2.5.0 next we create a runoob-test.scss file, which reads:

`runoob-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 on the command line, which is about .scss Css code for file conversion:

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

We can follow another one in the back. .css file name, save the code to the file:

$ sass runoob-test.scss runoob-test.css

This will be generated in the current directory runoob-test.css file, the code is as follows:

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

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