A summary of the use of css preprocessor scss worth collecting

This article brings you relevant knowledge about the css processor scss. The css preprocessor: uses a special programming language to add some programming features to CSS, uses CSS as the target to generate files, and then Developers only need to use this language for coding work. I hope everyone has to help.

1. Why does the css preprocessor appear?

– CSS is not a programming language. It can only be used to write website styles. In the early days of the web, At that time, the construction of the website was still relatively basic, and the required styles were often very simple. However, with the increase in user needs and the upgrade of website technology, the static writing method of CSS is gradually no longer satisfied with the project. Without all the variables, constants and other programming syntax of a programming language like js, css code would inevitably become bloated and difficult to maintain. But there is no substitute for CSS, so the CSS preprocessor appears in front-end technology as an extension of CSS.

---

2. Common CSS preprocessors

– So far, CSS preprocessor technology has been quite mature, and many different CSS preprocessor languages ​​have emerged. . There are currently three mainstream ones: Sass (Scss), Less, and Stylus.

---

3. The convenience of CSS preprocessor

-Take Sass as an example

-The main functions of Sass are: allowing definition of variables and allowing CSS code Nesting, functions, mixins, inheritance, etc. These functions make writing CSS more consistent with programming language habits, making CSS code more reusable, making code functions more intuitive, and easier for programmers to read and maintain.

---

4. Sass preprocessor

Variables

Sass allows you to define variables for code reuse, use $ Definition of variables. When there are code blocks that use the same attributes, you can define a variable to store the reused attributes in the variable. When a certain attribute value needs to be modified uniformly, there is no need to find the attributes that need to be modified one by one in the code. Instead, the variable can be modified directly.

In the public component drug instructions, the border style of the component is set separately. This style is also used for the borders that separate parts inside components. Therefore, the style can be stored 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 through scss can be modified as:

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

---

Nesting

–Sass allows code nesting, for Select offspring. Compared with 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 public component 'Drug Instructions' is used to set the display style of the title when the left navigation bar is selected by mouse click.

Use nesting rules to embed the code After nesting:

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

The code after nesting is closer to the js-like structure, rather than a whole line of selectors. It is more conducive to observing various relationships between codes.

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

---

Mixin

In programming languages ​​such as JavaScript, it is allowed to write a code block that needs to be reused into a function, and call this expression where necessary to complete the function of writing the code once and reusing it multiple times. Mixin of scss also implements similar functions. But the mixin's code block does not produce a value.

You need to use @mixin to define a Mixin code block. To call a defined Mixin code block, use @include

, which is still based on the drug instructions. Code description of the component

/deep/ .borderLayout > p > .layoutCon {
   overflow: hidden;
   &:hover{ // 此处即为伪元素嵌套
       overflow: auto;
   }
}
.m-nav-bar{
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
   overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

There are two selectors in the component that both have the same css code block. Its function is to hide the scroll bar on the page. When the mouse hovers to the corresponding area, the scroll bar is displayed.

The code to hide 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 in programming languages ​​to reduce the amount of code. In scss, the inheritance function is equally important. Inheritance is useful if one style is almost identical to another style, with only a few differences.

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

(It seems that the functions implemented by inheritance and mixin are similar. If the code of @mixin is directly inherited, will the implemented functions be the same?)

(Learning video sharing: css video tutorial)

The above is the detailed content of A summary of the use of css preprocessor scss worth collecting. For more information, please follow other related articles on the PHP Chinese website!