Why is Sass

As a front-end developer, CSS should be familiar. Most front-end developers have a love-hate relationship with CSS, loving its ability to beautify pages with simple code, and hating it because it becomes less maintainable as the project gets more complex. As a developer, CSS is more of a design-like language than a development-like language. Such as:

  • Lack of modularity mechanism
  • The lack of a variable mechanism creates a lot of duplicate code
  • Nested hierarchies are a pain
  • Multiplexing difficulties
  • Therefore, where there is a demand, there is a market, hence Sass.

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

Sass is a CSS development tool that provides many convenient writing methods, greatly saving designers’ time and making CSS development simple and maintainable. (Here you can also learn about CSS preprocessing technology ~)

Here is a brief introduction to the basic use of Sass

Variable mechanism

Sass allows you to use variables, all of which start with $. If a variable needs to be embedded in a string, it must be in #{}.

$main-color: # 333;
$side: left;

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

The benefits of using variable definitions are obvious. One is that variable attributes that are frequently invoked can be placed in a single folder, making it easier for multiple people to coordinate development, and the other is easier to unify the project style.

Nested writing

The lack of nesting is probably the worst thing about CSS. Here’s how to write CSS:

.container .content .left-side .name {
    font-size: 20px;
}
.container .content .left-side .age {
    font-size: 14px;
}
Copy the code

With Sass this is easy, avoiding a lot of duplicate selectors:

.container {
    .content {
        .left-side {
            .name {
                font-size: 20px;
            }
            .age {
                font-size: 14px; }}}}Copy the code

Module mechanism

There is a modular @import rule in CSS, but because it needs to be executed to download the required code, it can cause pages to stall. Scss extends it to allow it to import Scss or Sass files. The imported files are merged and compiled into the same CSS file, and variables or mixins contained in the imported file can be used in the imported file.

@import "common";
@import "popup";
@import "module_a";
Copy the code

@import enables CSS and HTML to be completely separated during development. CSS can be introduced through a file, and styles need not be modified to HTML files. Projects will not become more complicated with the increase of business complexity, but only need to add, modify and delete corresponding functional modules.

Mixin

Sass provides a hybrid instruction that separates common style fragments into separate files for easy reuse.

Before Sass, part of our CSS looked like this:

.div1 {
    background: red;
    border: 1px solid # 333;
    border-radius: 2px;
}
.div2 {
    background: blue;
    border: 1px solid # 333;
    border-radius: 2px;
}
Copy the code

If you want to extract a common style fragment you can only do this:

.div1..div2 {
    border: 1px solid # 333;
    border-radius: 2px;
}
.div1{... }.div2{... }Copy the code

Each time you want to reuse the style fragment, you have to add a selector to it, and the same selector has different style fragments, which can be very expensive to maintain as the project complexity increases. (If you want to optimize the writing, you can split the common part into a new class, but this will increase the complexity of the class name.)

With Sass’s @mixin it’s a lot easier:

@mixin grey-border-radius {
    border: 1px solid # 333;
    border-radius: 2px;
}
.div1 {
    @include grey-border-radius;
    background: red;
}
Copy the code

Not only that, but @mixin can also specify arguments:

@mixin ml($value: 10px) {
    float: left;
    margin-left: $value;
}
.div1 {
    @include ml(20px);
}
Copy the code

Inheritance mechanism

Sass also provides an inheritance mechanism that allows one selector to inherit from another.

Suppose you have a message box that, in addition to the base style, 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;
}
Copy the code

If we define the style above, we need to add a.msg class name to each tag, using Sass inheritance mechanism:

.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

It’s not hard to see how you could have done the same thing with @mixin, but with the difference that inheriting copies selectors and blending copies style fragments. The official documentation also explains how to choose between the two, which is detailed here.

Custom function

Sass provides functions similar to JS functions, mainly used for some calculations or in conjunction with control statements.

For example, mobile development can encapsulate a function to convert PX to REM:

$baseFontSize: 20;
@function px2rem($val) {
  @return $val/$baseFontSize + rem;
}

.big-text{
    font-size: px2rem(30);
}
Copy the code

summary

This article provides a basic introduction to the use of Sass, which is sufficient for everyday development. For more advanced use of Sass, seeSass official Chinese document.