Bagaimanakah Saya Boleh Menggunakan Sifat CSS sebagai Nilai Campuran SASS?

Harta CSS sebagai Nilai Campuran SASS

Apabila mencipta campuran jidar/padding universal dalam SASS, anda mungkin menghadapi kebimbangan tentang menetapkan sifat CSS sebagai nilai campuran. Coretan kod yang disediakan ialah percubaan untuk menyelesaikan tugas ini. Walau bagaimanapun, pengubahsuaian tertentu diperlukan untuk menjadikannya berfungsi sepenuhnya.

Penyelesaian:

Kunci untuk menyelesaikan isu ini terletak pada interpolasi rentetan. Dengan menggunakan notasi #{$var}, seseorang boleh menggunakan pembolehubah sebagai nama sifat.

Kod Dibetulkan:

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}

DEMO:

Pembetulan ini memastikan bahawa sifat CSS (margin atau padding) boleh ditetapkan secara dinamik berdasarkan parameter mixin.

Nota:

Untuk pemilih atribut ...*="_m", perlu dipertimbangkan bahawa pemilih ini akan digunakan pada semua elemen yang mengandungi "_m" dalam nama kelas mereka, termasuk yang mempunyai "_mid" juga. Oleh itu, ia mungkin memerlukan beberapa penilaian semula dan pelarasan untuk mencapai kekhususan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Sifat CSS sebagai Nilai Campuran SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!