Inasambaa @mixin na @include ya Sass

Sass Mixin

@mixin 指令可让您创建可在整个网站中重复使用的 CSS 代码。

创建 @include 指令是为了让您使用（引用）mixin。

定义 Mixin

mixin 是用 @mixin 指令定义的。

Sass @mixin 语法：

@mixin name {
  property: value;
  property: value;
  ...
{}

Mbinu hii inakuzia mix-in kwa jina la "important-text":

Inayofunguliwa cha SCSS:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
{}

Inafaa kusoma ujumbe:

Inafaa kusoma ujumbe wa Sass kuhusu harakati na zana: Harakati na zana inatathazamia kama zingine.

Kimejulikana kwamba @mixin important-text { } na @mixin important_text { } inaonekana kama Mixin moja!

Kutumia Mixin

@include Inarudishwa kwa kufaa kusoma Mixin.

Inafaa kusoma ujumbe wa Sass kuhusu harakati na zana: Harakati na zana inatathazamia kama zingine.

selector {
  @include mixin-name;
{}

Kwa hivyo, kumwengaa mix-in important-text yaliotengwa hivi:

Inayofunguliwa cha SCSS:

.danger {
  @include important-text;
  background-color: green;
{}

Mchukuzi wa Sass itakuwa na CSS kwa hiki:

Muafuturo wa CSS:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
{}

Mix-in inaweza kuwa na mix-in zingine:

Inayofunguliwa cha SCSS:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
{}

Kuwasiliana thamani kwa Mixin

Mixins inapakia thamani. Kwa njia hii, unaweza kuwasiliana thamani kwa mix-in.

Hii ni methodi ya kuhakiki mix-in na thamani:

Inayofunguliwa cha SCSS:

/* Kuhakiki mix-in na thamani mbili */
@mixin bordered($color, $width) {
  border: $width solid $color;
{}
.myArticle {
  @include bordered(blue, 1px);  // kutumia mix-in na thamani mbili
{}
.myNotes {
  @include bordered(red, 2px); // kutumia mix-in na thamani mbili
{}

Taradhishe, thamani zimeingizwa kama muhimu, na zikawasaidia kama thamani ya kiwango cha jikaze ( rangi na ukuru).

Baada ya kusoma, CSS itakuwa kama hii:

Muafuturo wa CSS:

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

Thamani muhimu ya Mixin

kwa hili inaweza kuhakiki thamani wa mix-in kwa thamani muhimu:

Inayofunguliwa cha SCSS:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
{}

Kisha, unahitaji kumieleza thamani inayotofautiana kwenda Mixin inayotumika:

Inayofunguliwa cha SCSS:

.myTips {
  @include bordered($color: orange);
{}

Kutumia Mixin kama kina kwa wengi wa wengine

Matokeo mwingine wa kuitumia Mixin kama kina kwa wengi wa wengine (kwenye browseri) ni kina kwa wengi wa wengine.

Hii ni mbinu ya uharibifu wa uharibifu:

Inayofunguliwa cha SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
{}
.myBox {
  @include transform(rotate(20deg));
{}

Baada ya kufunguliwa, CSS itakuwa kama inayotajwa hapa chini:

Inayofunguliwa cha CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
{}