YouTipSass Install
# Sass Installation
This chapter mainly introduces the installation and usage of Sass.
### NPM Installation
We can use npm (Introduction to NPM) to install Sass.
npm install -g sass
**Note:** For domestic npm, it is recommended to use the Taobao mirror for installation. Refer to: (#)
### Installation on Windows
We can use the Windows package manager (https://chocolatey.org/) to install:
choco install sass
### Installation on Mac OS X (Homebrew)
Mac OS can use the (https://brew.sh/) package manager to install:
brew install sass/sass/sass
For more installation methods, please refer to the official website: [https://sass-lang.com/install](https://sass-lang.com/install)
* * *
## Usage Introduction
Our tutorial uses the sass installed via npm. After installation, you can check the version:
$ sass --version 1.22.12 compiled with dart2js 2.5.0 Next, we create a file named -test.scss with the following content:
## -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 to CSS code: $ sass -test.scss @charset "UTF-8";/* Define variables and values *//* Use variables */ body { background-color: lightblue; color: darkblue; font-size: 18px;}
We can follow it with another .css filename to save the code to a file:
$ sass -test.scss -test.css This will generate a -test.css file in the current directory with the following code: @charset "UTF-8";/* Define variables and values *//* Use variables */ body { background-color: lightblue; color: darkblue; font-size: 18px;}