preface

Coincidentally, the technology stack mentioned in the previous article is not the same, and then found that CSS preprocessing language is not the same, xiaobian before using less, the company uses sass. Sass website is very uncomfortable to look at (not water articles, not water articles, not water articles).

sass

Why these CSS preprocessor languages exist, check it out for yourself.

Nested rules

Sass also supports style nesting, which makes it easier to write styles

div {
.  span {
.  }
} Copy the code

The parent selector

The existence of the parent selector is more convenient, sometimes also need to directly use the nested outer layer of the parent selector, we will use it when the pseudo-class, and then according to the class name naming rules we can also use it to replace the parent class name.

<div class="header">
  <div class="header-nav"></div>
  <span>The head content</span>
</div>
<style>
 .header {  &:hover {  background-color: red;  }  span {  font-size: 20px;  }  &-nav {  display: flex;  }  } </style> Copy the code

Attributes are nested

There are many attribute prefixes that are the same, and Sass provides attribute nesting.

.header {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
 } } Copy the code

SassScript

As the name suggests, it allows attributes to use additional functions such as variables, arithmetic operations and so on

#color :red;
.header {
  background-color: #color
}
Copy the code