In this chapter we mainly introduce the installation and use of Sass. We can use it. Note: domestic We can use Windows’s package manager Chocolatey to install: Mac OS can be used Homebrew package Manager to install: More installation methods can be found on the official website: https://sass-lang.com/install Our tutorial uses $sass– version 1.22.12 compiled with dart2js 2.5.0 next we create a Then enter the following command on the command line, which is about We can follow another one in the back. This will be generated in the current directory 13.2.1. NPM installation ¶
npm
(introduction to NPM usage) to install Sass.npm install -g sass
npm
is recommended to use Taobao image to install 13.2.2. Install on Windows ¶
choco install sass
13.2.3. Mac OS X (Homebrew) installation ¶
brew install sass/sass/sass
13.2.4. Introduction to use ¶
npm
for the installed sass, you can view the version after the installation is complete:
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;
}
.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;
}
.css
file name, save the code to the file:$ sass runoob-test.scss runoob-test.css
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 */