Get the App
SLTechnology News&Howtos  ›  Development  › 

What are the installation methods of SASS

Shulou Source: shulou.com Published: 2022-06-01 16:10:32 09月17日 Update

This article mainly shows you "what are the installation methods of SASS", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the installation methods of SASS" this article.

SASS is a dynamic style language, is an auxiliary tool to strengthen CSS, it in CSS grammar based on the addition of variables, nesting, mixing, import, function of advanced functions, these extensions make CSS more powerful and elegant, contribute to better management of style files, as well as more efficient development projects.

NPM installation

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

Npm install-g sass

Note: domestic npm recommends using Taobao image to install. Refer to: NPM domestic slow problem solving.

Install on Windows

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

Choco install sassMac OS X (Homebrew) installation

Mac OS can be installed using the Homebrew package Manager:

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 the sass installed by npm, and you can view the version after installation:

$sass-version 1.22.12 compiled with dart2js 2.5.0 next let's create a runoob-test.scss file with the following contents: runoob-test.scss file code:

/ * define variables and values * / $bgcolor: lightblue;$textcolor: darkblue;$fontsize: 18pxPlaced * use the variable * / body {background-color: $bgcolor; color: $textcolor; font-size: $fontsize;}

Then enter the following command on the command line to convert the css code from the .scss file:

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

We can save the code to the file followed by a .css file name:

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

This will exist the runoob-test.css file in the current directory. 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 * /

The above is all the contents of the article "what are the installation methods of SASS?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Tags: Variables files code content security ways articles management commands more styles UTF-8 learning help powerful advanced elegant and then functions functions Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno OPPO Reno Redmi Shulou Technology Xiaomi MariaDB