Tambahkan variabel dalam LESS css

Sangat Tidak Mungkin

Lihat dokumentasi tentang variabel LESS. Pada dasarnya, variabel LESS adalah konstanta dalam lingkup pembuatannya. Mereka malas memuat, dan tidak dapat "diubah" dengan cara itu. Definisi terakhir akan menjadi definisi yang digunakan untuk semua orang dalam lingkup tersebut. Dalam kasus Anda, kesalahan akan terjadi, karena variabel tidak dapat mereferensikan dirinya sendiri.

Perhatikan contoh ini:

@counter: 1;
.someSelector("nameOfClass", @counter);
@counter: 2;
.someSelector("nameOfClass1", @counter);

.someSelector(@name; @count) {
  @className: ~"@{name}";
  .@{className} {
  test: @count;
  }
}

Outputnya akan menjadi 2 untuk keduanya:

.nameOfClass {
  test: 2;
}
.nameOfClass1 {
  test: 2;
}

Ini karena LESS mendefinisikan @counter dengan definisi terakhir dari variabel dalam cakupan tersebut. Ia tidak memperhatikan urutan panggilan yang menggunakan @counter, melainkan bertindak seperti CSS dan mempertimbangkan "cascade" variabel.

Untuk diskusi lebih lanjut mengenai hal ini di LESS, Anda dapat melacak diskusi yang terjadi pada permintaan fitur LESS ini.

Solusinya ada di Penyetel Panggilan Rekursif untuk Variabel Lokal

Seven-phases-max tertaut dengan apa yang dia yakini sebagai bug di LESS , tapi menurutku tidak. Sebaliknya, bagi saya tampaknya merupakan penggunaan kreatif dari pengaturan ulang penghitung secara rekursif untuk mendapatkan efek yang diinginkan. Ini memungkinkan Anda mencapai apa yang Anda inginkan (menggunakan kode contoh saya):

// counter

.init() {
  .inc-impl(1); // set initial value
} .init();

.inc-impl(@new) {
  .redefine() {
    @counter: @new;
  }
}

.someSelector(@name) {
  .redefine(); // this sets the value of counter for this call only
  .inc-impl((@counter + 1)); // this sets the value of counter for the next call
  @className: ~"@{name}";
  .@{className} {
    test: @counter;
  }
}

.someSelector("nameOfClass");
.someSelector("nameOfClass1");

Berikut ini keluaran CSSnya:

.nameOfClass {
  test: 1;
}
.nameOfClass1 {
  test: 2;
}

CATATAN: Saya yakin Anda tidak sepenuhnya mengubah nilai global di sini, melainkan menetapkan nilai lokal baru dengan setiap panggilan ke .someSelector. Apakah ini didasarkan pada perilaku buggy atau tidak masih dipertanyakan, namun jika demikian, solusi ini mungkin akan hilang di masa mendatang. Untuk komentar lebih lanjut mengenai keterbatasan metode ini, lihat diskusi di sini.