Why is sass

As a front-end Web developer, YOU must be familiar with CSS. Most developers have a love-hate relationship with CSS, beautifying pages with simple code, but the more complex the project becomes, the less maintainable it becomes. As a developer, CSS is more like a design language than a development language

The lack of modularity and the lack of a variable mechanism creates a lot of repetitive nested code hierarchies that are painfully difficult to reuse

Sass is the most mature, stable, and powerful professional CSS extension language in the world

Variable mechanism

Sass allows the use of variables, all variables start with $, note that if variables need to be nested within a string, they must be written in #{}. The advantages of using variable definitions are obvious. 1. Take a look at the following sample code

$main-color: #333;
$side: left;
.div1 {
    background: $main-color;
    border-#{$side}-redius: 5px;
}
.div2 {
    background: $main-color;
}
Copy the code

Nested writing

The lack of nesting is one of the biggest things about CSS. Sass makes it much easier to write before and after, avoiding a lot of selectors

.wrap .cont .sider .title { font-size: 10px; } .wrap .cont .sider .age { font-size: 19px; } .wrap{ .cont{ .sider{ .title{ font-size: 10px; } .age{ font-size: 19px; }}}}Copy the code

Module mechanism

@import ".. /.. /assets/scss/moveList.scss";   // Import the SCSS file
@import ".. /.. /assets/scss/liveList.scss";   
@import ".. /.. /assets/scss/popUp.scss";
Copy the code

@import makes CSS development completely separate from HTML. You can import CSS in a single file, and you don’t need to modify styles in the HTML file. The project doesn’t get more complicated, you just need to add and modify and delete the corresponding modules

Mixin

Sass provides mixed instructions for easy reuse,

// Don't use our CSS before sass
.focused{
    width: 570px;
    height: 339px;
    border: 2px solid chartreuse;
}
.unfocused{
    width: 570px;
    height: 339px;
    border: 4px solid red;
}
// This is the only way to extract shared code
.focused,
.unfocused{
    width: 570px; height: 339px; } .focused, .unfocused{.......... }// This is much simpler with sass
@mixin all-size {
    width: 570px;
    height: 339px;
}
.focused{
    @include all-size;
    border: 2px solid chartreuse;
}
.unfocused{
    @include all-size;
    border: 4px solid red;
}
Copy the code

Inheritance mechanism

Sass also provides an inheritance mechanism that allows one selector to inherit from another. If you have a message box, in addition to the base style, it has success and failure styles, written in CSS like this:

.msg {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
}
.msg-success {
    color: #4cae4c;
}
.msg-error {
    color: #d43f3a; } if you define the style above, you need to add a.msg class name to each tag, using Sass inheritance:.msg {border: 1px solid #e3e3e3; background: #dff0d8; } .msg-success { @extend .msg; color: #4cae4c; } .msg-error { @extend .msg; color: #d43f3a; } copy the code after compiling:.msg,.msg-success,.msg-error {border: 1px solid #e3e3e3;
  background: #dff0d8;
}
.msg-success {
  color: #4cae4c;
}
.msg-error {
  color: #d43f3a;
}
Copy the code

Supplementary interview questions?

The preprocessor language Sass less? The biggest difference between less and Sass is how they are implemented. Less is run in javascript, so less is also commonly used for client processing. Sass is based on Ruby and is usually handled on the server side

CSS is easy to understand, but there is no logic why sass&less? Often a color value can appear many, many times, or a width value can appear many, many times; There are a lot of selectors in your code, you use that one, you use that one, you use that one, it’s illogical, it’s hierarchical, it’s ugly, it’s not easy to maintain and with each new property comes a lot of browser compatibility issues and CSS is easy to learn and easy to use, but it has a lot of disadvantages, so pre-processing languages are introduced

Describe the difference between sass and less. Sass is compiled based on Ruby, less is compiled based on NodeJS. Sass has @extednd for inheritance, less does not have sass to define a variable with $, less uses @ to define a variable. Sass supports @for loops, less does not