Bolehkah Nilai Campuran SASS Menjadi Sifat CSS Dinamik?-tutorial css-php.cn

Bolehkah Nilai Campuran SASS Menjadi Sifat CSS Dinamik?

Barbara Streisand

Lepaskan： 2024-10-27 10:52:30

asal

999 orang telah melayarinya

Can SASS Mixin Values Be Dynamic CSS Properties?

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

Salin selepas log masuk

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

Salin selepas log masuk

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!