Rumah >hujung hadapan web >tutorial css >Bolehkah Nilai Campuran SASS Menjadi Sifat CSS Dinamik?

Bolehkah Nilai Campuran SASS Menjadi Sifat CSS Dinamik?

Barbara Streisand
Barbara Streisandasal
2024-10-27 10:52:30979semak imbas

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

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn