variable

Define variables

$color-white: white;
Copy the code

Use the variable

body {
    background-color: $color-white;
}
Copy the code

@ mixins with @ include

Define a mixin

/* Declare mixins*/ @mixins border {border: 1px solid #red; }Copy the code

The use of a mixin

/* use mixins*/.my-div {@include border; }Copy the code

Pass variables to mixins

Blending can receive parameters. We can pass variables to interfuse. Defines parameters that can be accepted by mixing:

$value = $value; $value = $value; $value = $value; $value = $value; } .myArticle { @include bordered(blue, 1px); }. MyNotes {@include bordered(red, 2px); // Call mixin and pass two arguments}Copy the code

In the example above, the blending argument sets the border properties (color and width). Convert the above code to CSS code as follows:

.myArticle {
  border: 1px solid blue;
}
.myNotes {
  border: 2px solid red;
}
Copy the code

Variable parameter

Sometimes, when it is not clear how many arguments a mixin or a function should take, we can use… To set variable parameters. For example, a mixin that creates box-shadows can take any number of box-shadows as arguments.

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
Copy the code

Compiled CSS code

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
Copy the code

@ the extend and inherit

The @extend directive tells Sass that the styles of one selector are inherited from another. If one style is nearly identical to another, with only minor differences, using @extend is useful.

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}
Copy the code

Compiled CSS code

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}
Copy the code

With @extend, we don’t need to specify multiple classes in the HTML button tag class=”button-basic button-report”, just class=”button-report” class. @extend is a good example of code reuse.