Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what is the role of Sass in the front end of web". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the role of Sass in the front end of web"?

One of the important features of sass that benefits people is that it introduces variables into css. You can define repeatedly used css attribute values as variables and then refer to them by variable names without having to rewrite the property value. Or, for an attribute value that has been used only once, you can give it an easy-to-understand variable name to let people know the purpose of the attribute value at a glance.

Sass variable declaration

The declaration of the sass variable is similar to the declaration of the css attribute:

$highlight-color:#F90

This means that the variable $highlight-color now has a value of # F90. Any assignment that can be used as a css attribute value can be used as a variable value for sass, or even multiple property values separated by spaces, such as $basic-border:1pxsolidblack;, or comma-separated attribute values, such as $plain-font: "MyriadPro", Myriad, "HelveticaNeue", Helvetica, "LiberationSans", Arial, and sans-serif;sans-serif;. The variable doesn't take effect at this time, unless you reference it-- we'll soon learn how to refer to it.

In this code, the variable $nav-color is defined outside the rule block, so it can be referenced like the nav rule block in this stylesheet. The variable $width is defined in the {} rule block of nav, so it can only be used within the nav rule block. This means that you can define and use the $width variable elsewhere in the stylesheet without affecting it.

It's no use just declaring variables, our ultimate goal is to use them. The above example has shown how to use the two variables $nav-color and $width, and then we will explore the use of variables further.

Sass variable reference

Variables can be used wherever the standard value of the css attribute (such as 1px or bold) can exist. When css is generated, variables are replaced by their values. After that, if you need a different value, just change the value of the variable, and all the values generated where the variable is referenced will change accordingly.

At this point, I believe you have a deeper understanding of "what is the role of Sass in the front end of web?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.