SASS | @mixin 和 @include

Mixins 可用于对可以分配不同值的样式进行分组，并且可以像函数一样多次使用。我们也可以像函数一样在 mixin 中传递参数，这允许我们编写可重用的代码。

Mixin 是使用@mixin at-rule 定义的，它可以使用@include at-rule 在当前上下文中使用。

Mixins 有两种使用方式：无参数和有参数。

1. 不带参数：可以使用这种类型的混合，当我们不需要更改属性的值时，即我们想一次又一次地使用具有相同属性值的一组属性。

   句法：

   • 定义 mixin：@mixin name_of_mixin {…}
   • 在当前块中使用 mixin：@include name_of_mixin; .

   @mixin block-name{
       property-1: value;
       property-2: value;
           ...
       property-n: value;
   }
   
   block-name2{
       @include block-name;
   }
           

   SCSS 文件：

   @mixin first-mixin {
       width: 100%;
       overflow: hidden;
       color: gray;
   }
               
   @mixin second-mixin {
       @include first-mixin;
               
       ul {
           list-style-type: none;
       }
               
       li {
           display: inline-block;
           width: 100px;
           padding: 5px 10px;
       }
               
       li a {
           text-decoration: none;
       }
               
   }
               
   navigationbar {
       @include second-mixin;
   }
           

   编译后的 CSS 文件：

   navigationbar {
       width: 100%;
       overflow: hidden;
       color: gray;
   }
   
   navigationbar ul {
       list-style-type: none;
   }
   
   navigationbar li {
       display: inline-block;
       width: 100px;
       padding: 5px 10px;
   }
   
   navigationbar li a {
       text-decoration: none;
   }
                 
           

2. 带参数：当我们想一次又一次地使用一组具有不同值的属性时，可以使用这种类型的 mixin，我们可以使用像函数这样的参数传递不同的值。这里参数默认值的概念与任何其他编程语言相同。

   句法：

   • 定义 mixin：@mixin name_of_mixin (arguments…) {…}
   • 在当前块中使用 mixin：@include name_of_mixin (arguments…);

   // Here default values are optional
   
   @mixin block-name($parameter1, $parameter2: default, ...) {
                   
       property-1: $parameter1;
       property-2: $parameter2;
       // You can use all the parameters 
       // same as variables
   }
   
   block-name2 {
       @include block-name($argument1, $argument2, ...);
   }
           

   SASS文件：

   // Here blue is default value of $three
   
   @mixin first-mixin($one, $two, $three: blue) {
       width: $one;
       overflow: $two;
       color: $three;
   }
   
   @mixin second-mixin($one, $two, $three, $four) {
       // Don't need to pass the third argument if 
           // the default value is same as your argument.
       @include first-mixin($one, $two /*, Default*/);
   
       ul {
           list-style-type: none;
       }
   
       li {
           display: inline-block;
           width: $four;
           padding: 5px 10px;
       }
   
       li a {
           text-decoration: none;
       }
   
   }
   
   navigationbar {
       @include second-mixin(100%, hidden, blue, 100px);
   }
           

   编译后的 CSS 文件：

   navigationbar {
     width: 100%;
     overflow: hidden;
     color: blue;
   }
   
   navigationbar ul {
     list-style-type: none;
   }
   
   navigationbar li {
     display: inline-block;
     width: 100px;
     padding: 5px 10px;
   }
   
   navigationbar li a {
     text-decoration: none;
   }