Bolehkah Nilai Campuran SASS Menjadi Sifat CSS Dinamik?

Bolehkah Nilai Campuran SASS Menjadi Sifat CSS?

Masalah:

Mencipta margin universal /padding mixin, anda telah tidak berjaya kerana struktur kod yang salah:

[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);
  }
}

Penyelesaian:

Untuk menggunakan pembolehubah sebagai nama sifat CSS dalam nilai campuran , interpolasi rentetan diperlukan, dicapai menggunakan sintaks #{$var}:

[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);
  }
}

Nota: Pastikan kekhususan pemilih dengan menilai semula struktur pemilih atribut.

Atas ialah kandungan terperinci Bolehkah Nilai Campuran SASS Menjadi Sifat CSS Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!