Bagaimanakah Saya Boleh Mengtemakan Pembolehubah Kurang Global Secara Dinamik Menggunakan Kelas CSS?

Mentemakan Pembolehubah Kurang Global

Dalam konteks membangunkan apl, anda mungkin menghadapi keperluan untuk mempersembahkan tema visual yang berbeza dengan cepat kepada pelanggan. Semasa mentakrifkan kelas penampilan berasingan untuk badan menukar visual halaman ialah satu pendekatan, anda sedang mencari untuk mengtemakan kurang pembolehubah global.

Takrifan Kurang Pembolehubah

Kurang membolehkan anda untuk takrifkan pembolehubah global seperti berikut:

@variable-name: value;

Pembolehubah Bertema

Untuk menetapkan tema pembolehubah bergantung pada kelas CSS penampilan, anda boleh menggunakan Less's @mixin untuk mentakrifkan campuran yang mengambil pembolehubah dan mentakrifkannya semula berdasarkan kelas penampilan. Berikut ialah contoh asas:

<code class="less">@navBarHeight: 50px;

@mixin theme($name) {
  if ($name == "white") {
    @navBarHeight: 130px;
  } else if ($name == "black") {
    @navBarHeight: 70px;
  }
}</code>

Penggunaan

Anda boleh menggunakan campuran ini seperti berikut:

<code class="less">.appearanceWhite {
  @include theme("white");
}
.appearanceBlack {
  @include theme("black");
}</code>

Contoh Lanjutan

Untuk pendekatan yang lebih disesuaikan, anda boleh menggunakan Padanan Corak dan Argumen Set Peraturan:

<code class="less">@themes: (
  (
    blue,
    rgb(41, 128, 185)
  ),
  (
    marine,
    rgb(22, 160, 133)
  ),
  ...
);

@mixin themed(@style) {
  @each $theme in @themes {
    .theme-@{nth($theme, 1)} & {
      @style();
    }
  }
}</code>

Penggunaan

<code class="less">#navBar {
  @include themed({
    color: green;
    background-color: orange;
  });
}</code>

Dengan menggunakan teknik ini, anda boleh membuat tema secara dinamik kurang pembolehubah global berdasarkan kelas CSS, membolehkan anda bertukar dengan mudah antara tema visual yang berbeza semasa masa jalan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengtemakan Pembolehubah Kurang Global Secara Dinamik Menggunakan Kelas CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!