Campuran dalam SASS

Mixin ialah alatan yang disediakan oleh prapemproses CSS, walaupun ia bukan fungsi ia boleh dianggap sedemikian, dan kegunaan utamanya ialah untuk menggunakan semula kod.

Pada lebih daripada satu kali kami mempunyai keperluan untuk mencipta berbilang kelas yang melakukan perkara yang sama tetapi menukar satu nilai, contohnya berbilang kelas untuk saiz fon.

.fs-10 {
  font-size: 10px;
}
.fs-20 {
  font-size: 20px;
}
.fs-30 {
  font-size: 30px;
}

Jika kita melihat dengan teliti, satu-satunya perkara yang berubah dalam senario ini ialah nombor untuk menamakan kelas dan untuk menetapkan nilai saiz fon, menggunakan campuran kita boleh mencipta fungsi yang mencipta kod ini untuk kita secara automatik.

Contoh:

// Esto es un mapa, lo que conocemos como un objeto en JavaScript
$sizes: (
  "10": "10px",
  "20": "20px",
  "30": "30px"
) 

// El mixin que crea las clases
@mixin generate-font-sizes($sizes) {
  // Recorremos cada uno de los elementos del mapa
  @each $key, $value in $sizes{
    // Creamos la clase e interpolamos los valores
    .fs-#{$key} {
      font-size: #{$value};
    }
  }
}

// Invocamos al mixin para que se ejecute
@include generate-font-sizes($sizes);

Apabila kami menyusun kod kami, kami akan mendapat hasil yang sama seperti kali pertama, tetapi kini anda mungkin berfikir bahawa kod kami lebih panjang daripada hasilnya, dan mungkin ia benar tetapi jika saya mahu, sebagai contoh, pergi dari 1 hingga 100 dan buat kelas dari fs-1 hingga fs-100 Saya juga boleh melakukannya dengan mixin

// El mixin que crea las clases
@mixin generate-font-sizes() {
  // El loop que hace el recorrido de 1 a 100
  @for $size from 1 through 100 {
    // Creamos la clase e interpolamos los valores
    .fs-#{$size} {
      font-size: #{$size}px;
    }
  }
}

// Invocamos al mixin para que se ejecute
@include generate-font-sizes();

Dengan ini kami akan memperoleh hasil yang diharapkan, dan ini bukan sahaja berfungsi untuk saiz fon tetapi untuk apa sahaja yang terlintas di fikiran, kami boleh membina sejumlah besar kod dengan blok kecil kod dalam campuran.

Ini sahaja buat masa ini, kami belajar cara menggunakan mixin dan menggunakan semula kod CSS dalam prapemproses.

Atas ialah kandungan terperinci Campuran dalam SASS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!