Isih fungsi dalam SASS

Dalam artikel ini, kita akan belajar tentang pengisihan fungsi dalam Sass, tetapi sebelum meneruskan, marilah kita memahami asas Sass ialah CSS yang berkuasa dan popular bahasa prapemproses yang membolehkan pembangun menulis dengan lebih cekap dan lebih mudah untuk mengekalkan helaian gaya. Salah satu kelebihan terbesar Sass ialah keupayaan untuk menggunakan fungsi untuk memudahkan proses pembangunan. Walau bagaimanapun, Sass tidak menyediakan fungsi pengisihan secara lalai.

Isih ialah tugas biasa dalam semua bahasa pengaturcaraan dan berguna dalam banyak konteks yang berbeza apabila menggunakan helaian gaya. Malangnya, Sass tidak menyediakan sebarang fungsi pengisihan terbina dalam, tetapi terdapat beberapa penyelesaian yang boleh digunakan oleh pembangun untuk mencapai hasil yang diinginkan.

Salah satu cara untuk melakukan pengisihan dalam Sass ialah menggunakan gelung dan pernyataan bersyarat. Kaedah ini melibatkan mencipta gelung yang berulang melalui senarai untuk diisih, membandingkan setiap item dengan item seterusnya dalam senarai, dan menukar jika perlu. Proses ini berulang sehingga keseluruhan senarai diisih dalam artikel ini, kami akan menggunakan algoritma isihan gelembung menggunakan gelung dan fungsi untuk mengisih.

Ini ialah contoh menggunakan teknologi pengisihan gelembung untuk melaksanakan fungsi pengisihan mudah dalam Sass -

Contoh

Kod SCSS ini mentakrifkan isihan fungsi($list), yang boleh mengisih set nombor dalam tertib menaik dan mengembalikan senarai yang diisih. Fungsi ini menggunakan pelaksanaan mudah algoritma isihan gelembung.

Mari kita fahami cara ia berfungsi, pertama, fungsi mengambil senarai nombor dan menyusunnya dalam tertib menaik; ia menggunakan gelung sementara dan gelung untuk dengan pernyataan if untuk membandingkan setiap pasangan dalam senarai nombor bersebelahan. Jika ia tidak teratur, ia menukarnya menggunakan pembolehubah sementara. Kemudian ulangi proses sehingga senarai diisih.

@function sort($list) {
   $len: length($list);
   $sorted: false;
   @while not $sorted {
      $sorted: true;
      @for $i from 1 to ($len - 1) {
         $j: $i + 1;
         @if nth($list, $i) > nth($list, $j) {
            $temp: nth($list, $i);
            $list: set-nth($list, $i, nth($list, $j));
            $list: set-nth($list, $j, $temp);
            $sorted: false;
         }
      }
      $len: $len - 1;
   }
   @return $list;
}

Bahagian kod di bawah menggunakan @setiap gelung untuk menjana kod CSS bagi setiap nombor dalam senarai diisih, mencipta kelas CSS dengan sifat lebarnya ditetapkan kepada nilai nombor didarab dengan 10 piksel.

$list: 10, 5, 3, 7, 2, 8;
$sorted-list: sort($list);

@each $num in $sorted-list {
   .number-#{$num} {
      width: #{$num * 10}px;
   }
}

Output

.number-2 {
   width: 20px;
}
.number-3 {
   width: 30px;
}
.number-5 {
   width: 50px;
}
.number-7 {
   width: 70px;
}
.number-10 {
   width: 100px;
}
.number-8 {
   width: 80px;
}

KESIMPULAN

Dalam artikel ini, kami mempelajari tentang fungsi pengisihan dalam SASS dan mengetahui bahawa Sass tidak menyediakan sebarang pengisihan terbina dalam. Walau bagaimanapun, anda boleh menulis fungsi isihan tersuai dalam SASS menggunakan gabungan arahan kawalan seperti gelung @for dan @while dan senaraikan fungsi manipulasi seperti length(), nth(), dan set-nth(). Fungsi tersuai ini boleh digunakan untuk mengisih senarai sebarang jenis data, termasuk nombor, rentetan atau objek, dan boleh menjana kod CSS dinamik berdasarkan senarai yang diisih.

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