آموزش Sass

شما با دیرکتیو @mixin میتوانید کدهای CSS خود را در هرجای وب سایت استفاده کنید.

شما با دیرکتیو @include میتوانید از mixin استفاده کنید.

تعریف mixin

mixin با دیرکتیو @mixin تعریف میشود.

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

در مثال زیر ما mixin با نام "important-text" تعریف کرده ایم:

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

استفاده از mixin

برای استفاده از mixin از دیرکتیو @include استفاده کنید.

 
selector {
  @include mixin-name;
}
 

بنابراین mixin بالا بصورت زیر استفاده میشود:

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

sass کدهای بالا را به CSS تبدیل میکند:

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

mixin میتواند شامل چندین mixin دیگر باشد:

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

انتقال متغیر به mixin

در mixin میتوان آرگومان تعریف کرد. با این شیوه میتوانید به mixin متغیر منتقل کنید.

مثال زیر نشان میدهد که چگونه میتوان mixin با آرگومان تعریف کرد:

 
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px;);
}
.myNotes {
  @include bordered(red, 2px);
}
 

مقدار پیشفرض برای mixin

میتوان برای متغیرهای mixin مقدار پیشفرض تعریف کرد:

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

بنابراین، تنها متغیری را که قصد تغییر آنرا دارید در mixin می آورید:

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

استفاده از mixin برای Vendor Prefixes

یکی از کاربردهای mixin برای Vendor Prefixes میباشد:

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