Sass @mixin ve @include

Sass Mixin

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

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

定义 Mixin

mixin 是用 @mixin 指令定义的。

Sass @mixin 语法：

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

Aşağıdaki örnek, "important-text" adında bir mixin oluşturur:

SCSS Grami:

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

İpucu:

Sass'ta tire ve alt çizginin ipuçları: tire ve alt çizgi aynı olarak kabul edilir.

Bu da demek oluyor ki @mixin important-text { } ve @mixin important_text { } aynı mixin olarak kabul edilir!

Mixin kullanımı

@include diresk, mixin'leri çağırmak için kullanılır.

Sass @include mixin grameri:

selektor {
  @include mixin-adı;
{}

Bu yüzden, yukarıda oluşturulan important-text mixin'ini içermek için:

SCSS Grami:

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

Sass dönüştürücü, yukarıdaki kodu normal CSS'ye dönüştürecektir:

CSS çıktısı:

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

Mixin'ler diğer mixin'leri de içerebilir:

SCSS Grami:

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

Değişkenleri Mixin'e ileme

Mixins parametreleri kabul eder. Bu şekilde mixin'e değişkenler iletilir.

Parametreye sahip mixin'i tanımlama yöntemleri şunlardır:

SCSS Grami:

/* iki parametreye sahip mixin'i tanımlama */
@mixin bordered($color, $width) {
  border: $width solid $color;
{}
.myArticle {
  @include bordered(blue, 1px);  // iki değerin sahip mixin'i çağırma
{}
.myNotes {
  @include bordered(red, 2px); // iki değerin sahip mixin'i çağırma
{}

Lütfen dikkat edin, parametreler değişken olarak ayarlandı ve ardından kenarlık özelliği değerleri (renk ve genişlik) olarak kullanıldı.

Derlendikten sonra, CSS şu şekilde olacaktır:

CSS çıktısı:

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

Mixin varsayılan değerleri

mixin değişkenlerine varsayılan değerler atayabilirsiniz:

SCSS Grami:

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

Sonra, mixin'i ifade ederken değiştirmek istediğiniz değeri belirtmeniz yeterlidir:

SCSS Grami:

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

Mixin'i Sağlayıcı Önek olarak Kullanma

Mixin'in bir başka iyi kullanımı (tarayıcı) sağlayıcı önekleridir.

Bu, bir dönüşüm örneğidir:

SCSS Grami:

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

Derlenmiş CSS şu şekilde görünecektir:

CSS Grami:

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