What is SASS?
Whether it's SASS, SCSS, Stylus, etc.

I'm sure you've all heard about it, but what is it? Why does everyone say it's easy to use and convenient?

In fact, this part needs to start from the very beginning of CSS design.

I believe you all have similar experience:

After painstakingly completing an official website, the owner responded, "I think the color of these buttons is too light, I hope they are darker; in addition, the background color is too dark, I want to be lighter. "

Okay, there's always something to do with the money. It took a lot of time to darken all the buttons and brighten the background.

After reading it, the owner still answered, "It's so ugly after deepening it?" Then you can help me get it back. It's better to go a little deeper. "

Believe in seeing you here, your fists are probably already hard.

In this way, they have changed and changed, and the money has not increased.

So it's time to start crying out wishes:

Is it possible to introduce the concept of program into CSS? For example, variables? In this way, we can use variables to replace the dead color. It's also very convenient to change, as long as we change one place.

Isn't that CSS preprocessor?
Yes, CSS preprocessor was born.

CSS preprocessor, which is called CSS "preprocessor" in Chinese, simply means that you can program some style-setting grammar first, and after this preprocessor, it will become standard CSS.

With CSS preprocessor, variables can also be applied to CSS. Of course, IF, loops and even functions in program grammar are all available, so that you can start from the designer into the program's no return path.

CSS preprocessor mainly provides the following functions:

Variable, Extend, Function, Mixin
Let's introduce how to use it one by one.

Variable
With the painful experience before, we realize that every time the demand comes, it changes and changes, changes and changes, and finally even forgets where the omission has been made, so we can help us to do centralized management through variables.

It only needs to be changed once to achieve the unified effect of the whole station.

$font_style:Microsoft JhengHei;
$body_color: #E1E1E1

body {
 font-family: $font_style;
 color: $body_color; 
}

Like the example code above, we can control font style, background color, and so on through variables.

Today, even if I want to change the style, I only need to change the value of the above variables to achieve the unification of the whole station, that is, variables.

Inheritance (Extend)
With variables, we can quickly apply the same variable to every style we need.

But there's another problem: "Every time I type, I have to repeat it."

In Alex's big movie, we mentioned that when we want to turn < a > into a button, we always type the following code:

a {
  display:block; /*Turn a into a block*/ 
  text-decoration:none; /*Clear the bottom line of the hyperlink*/
}

It turns out that every time we make a button, we need to type these two lines of code first, and then give different width and line height according to different kinds of buttons.

Is there any way that I can gather the fixed writing styles together, and I can only call in the future?

That's inheritance.

%aButton {
  display:block;
  text-decoration:none;
}

a {
 @extend %aButton;
 /*Through the extension above, I can use the written style directly, and then I can customize the other button styles below.*/
 width:100%;
 height:20px;
 line-height:20px;

}

So see here, we have made good use of variables and inheritance, so that our SSC can do a centralized control, the generated CSS is clean, kill two birds with one stone.

But then there's another problem that hasn't been solved.

We often define each type of word, its font size.

For example:

The picture above is a design draft of the Spiritual Time House held by Hexagonal College.

It defines the font sizes of Title, Title2, Title3, Subtitle, paragraph and Logo.

If we define different types of words every time, we will have different sizes and feel a little tired.

You know, human beings are lazy, and technology always comes from human laziness.

So at this time our function can be used!

Function
We can use functions to define the size of a word in each category.

/*Here we use the design manuscript provided by Hexagonal College as an example, and we find that it is exactly 12 times the number.*/

$baseSize: 12px;

/*Write a function to define the size of each type of word. */
@function font($level: 1) {

  @return $baseSize *$level;
}

/*Apply function font()*/

.Title {
 font-size:font(6);
 font-family: Roboto-Black;
}

.Title2 {
 font-size:font(4);
 font-family: Roboto-Black;
}

.Title3 {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Subtitle {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Paragraph {
 font-size:font(1.3);
 font-family: Roboto-Black;
}

So today, if I want the whole baseSize to be adjusted to a multiple of 10, then I just need to change the top $baseSize to achieve the unified effect of the whole station.

Is it simple and happy?

Okay ~finally to the last point.

As we mentioned earlier, for the same, repetitive style, we can help us through Extend.

Through SASS, we can write together common styles, and then use @extend to load styles directly:

%aButton {
  display:block;
  text-decoration:none;
}

.successBtn {
 @extend %aButton;
 /*Through the extension above, I can use the written style directly, and then I can customize the other button styles below.*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @extend %aButton;
 /*Through the extension above, I can use the written style directly, and then I can customize the other button styles below.*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*Generated CSS */

.successBtn,.errorBtn {
  display:block;
  text-decoration:none;
}
.successBtn {
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 width:80%;
 height:20px;
 line-height:20px;
}

But what should we do when we encounter a word-level one?

Different types of text have their own corresponding word size, nor is it a concept of multiple growth like just function.

So how can I give different sizes for different word levels?

That's Mixin.

Mixin
As I said earlier, I want to be different in size for each type of text (e.g. Title:36px, Subtitle:28px,content:16px).

But with extension, we find that "extend s centralize the management of shared styles". It's just a style that produces a Code.

What about Mixin?

He would do this:

@mixin aButton() {
  display:block;
  text-decoration:none;
}

.successBtn {
 @include aButton();
 /*Through the inclusion above, I can directly use the mixin style written above to produce my own Code.*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @include aButton();
 /*Through the inclusion above, I can directly use the mixin style written above to produce my own Code.*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*Generated CSS */

.successBtn {
  display:block;
  text-decoration:none;
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 display:block;
 text-decoration:none;
 width:80%;
 height:20px;
 line-height:20px;
}

Yes, unlike extension, it does not bring together common styles, but produces two identical pieces of code.

And this can be applied to our word level.

Although relatively large packages of styles are generated, each include produces a set of styles.

But relatively, it can have customized effect.

Let's take a look at the font style Alex Da provides:

$baseSize:14px;
$sizeLevel:2px;

@function font($level: 0) {
  @if $level < 0 {
    $level:0 
  }
  @return $baseSize + $sizeLevel * round($level);
}

@function rhythm($size) {
  @return ceil($size * $paddingLevel / $baseLineSize) * $baseLineSize;
}

@mixin font($level: 1, $line-height: auto) {
  $size: font($level);
  $line: rhythm($size);

  font-size: $size;
  @if $line-height == auto or $line-height < $line {
    line-height: $line;
  } @else {
    line-height: $line-height;
  }
}


.aaa {
  @include font(2);
}

.bbb {
  @include font(4);
}

.ccc {
  @include font(2);
}

/* Generated CSS */

.aaa {
  font-size:20px;
}

.bbb {
   font-size:28px;
}

.ccc {
  font-size:16px;
}

Through Mixin, we can give different types of font levels and different font sizes. That's how simple it is.

Note: Mixin is compared to extend, one is to generate multiple styles; the other is to centralize the management of all styles. Don't confuse Minxin with Function.

After reading the SCSS functions described above, do you know more about them? I hope today's notes will bring you / you a different CSS experience.

Of course, the author only gives a brief introduction to the key functions of SCSS, which is convenient for quick reference as a dictionary.