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

This article mainly explains "how to use css preprocessor scss". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use css preprocessor scss".

1. Why is there css preprocessor?

-CSS is not a programming language, it can only be used to write website styles. In the early days of web, the construction of websites was relatively basic, and the required styles were often very simple. However, with the increase of user demand and the upgrading of website technology, the immutable way of writing css is no longer satisfied with the project. Without all the variables, constants, and other programming syntax of a programming language like js, css code will inevitably be bloated and difficult to maintain. But there is no substitute for css, so the css preprocessor appears in the front-end technology as an extension of css.

two。 Common css preprocessor

Up to now, the technology of CSS preprocessor has been quite mature, and many different CSS preprocessor languages have emerged. At present, there are three kinds of mainstream: Sass (Scss), Less, Stylus.

Convenience of 3.CSS preprocessor

-take Sass as an example

The main functions of Sass are: allow you to define variables, allow CSS code nesting, function functions, Mixin, inheritance and so on. These functions make the writing of CSS more in line with the habit of programming language, making the reusability of CSS code higher, the code function more intuitive, and easier for programmers to read and maintain.

4. Sass preprocessor variables

Sass allows you to define variables for code reuse, using $for variable definition. When there is a block of code that uses the same attributes, you can store the reused attributes in the variable by defining a variable. When you need to uniformly modify the value of an attribute, you don't have to find the attribute that needs to be modified one by one in the code, but modify the variable directly.

In the drug manual of the common component, the frame style of the component is set separately. This style is also used for borders separated by parts within the component. So you can store the style in a variable for reuse.

/ deep/ .borderLayout.showBorder {border: 1px solid # EBEEF5} / deep/.borderLayout > p.showBorder.left {border-right: 1px solid # EBEEF5;}

The nesting rules of scss can be modified to:

$border: 1px solid # EBEEF5/deep/ .borderLayout.showBorder {border: $border} / deep/.borderLayout > p.showBorder.left {border-right: $border;} nested

-Sass allows code nesting to select descendants. Compared to css's native descendant selector, nested-style code is more intuitive.

/ deep/ .ant-anchor-link-active > .ant-anchor-link-title {color:#303133}

The css code block of the common component "drug instruction", which is used to set the display style of title when the left navigation bar is selected by mouse click.

After nesting the code using nesting rules:

/ deep/ .ant-anchor-link-active {.ant-anchor-link-title {color:#303133}}

The nested code is more similar to the structure of js than a whole line of selectors. It is more helpful to observe the various relationships between the code.

In addition, scss can also implement attribute nesting and pseudo-element nesting, thus achieving more concise code

Mixin

In programming languages such as JavaScript, code blocks that need to be reused are allowed to be written into a function, and the expression is called where necessary to complete the function of multiple reuse by writing the code once. Scss's Mixin implements a similar function. But the code block of Mixin does not produce a value.

To define a Mixin code block, you need to use @ mixin, and call a defined Mixin code block using @ include

It is still explained by the code of the component of the drug instruction.

/ deep/ .borderLayout > p > .layoutCon {overflow: hidden; &: hover {/ / here is pseudo element nesting overflow: auto;} .m-nav-bar {display: flex; flex-direction: column; overflow: auto; height:100%; overflow: hidden; &: hover {overflow: auto;}}

Two selectors in the component have the same css code block that hides the scroll bar in the page, which is displayed when the mouse hover is over the area to which it belongs.

The code that hides the scroll bar can be defined separately using mixin and then called.

@ mixin hide-scroll {overflow: hidden; &: hover {overflow: auto;}} / deep/ .borderLayout > p > .layoutCon {@ include hide-scroll;} .m-nav-bar {@ include hide-scroll; display: flex; flex-direction: column; overflow: auto; height:100%;} inheritance

Inheritance is also an important function to reduce the amount of code in programming languages, and inheritance is also important in scss. It is useful to use inheritance if one style is almost the same as another, with only a few differences.

When you need to inherit a piece of code, you can use the selector after @ extend,extend to be the inherited code.

(it seems that the functionality of inheritance and mixin implementation is similar. If you inherit the @ mixin code directly, will the function be the same? )

Thank you for your reading, the above is the content of "how to use css preprocessor scss". After the study of this article, I believe you have a deeper understanding of how to use css preprocessor scss, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.