In this chapter we mainly introduce the installation and use of Sass.
13.2.1. 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
13.2.2. Install on Windows ¶
We can use Windows’s package manager Chocolatey to install:
choco install sass
13.2.3. 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
13.2.4. 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 */