เพิ่มตัวแปรใน CSS น้อยลง

เป็นไปไม่ได้อย่างเคร่งครัด

ดูเอกสารประกอบเกี่ยวกับตัวแปร LESS โดยพื้นฐานแล้ว ตัวแปร LESS จะเป็นค่าคงที่ในขอบเขตของการสร้างตัวแปรเหล่านั้น พวกมันขี้เกียจโหลดและไม่สามารถ "เปลี่ยนแปลง" ในลักษณะนั้นได้ คำจำกัดความสุดท้ายจะเป็นคำจำกัดความที่ใช้สำหรับทุกคนในขอบเขตนั้น ในกรณีของคุณข้อผิดพลาดจะเกิดขึ้น เนื่องจากตัวแปรไม่สามารถอ้างอิงตัวเองได้

ลองพิจารณาตัวอย่างนี้:

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

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

ผลลัพธ์จะเป็น 2 สำหรับทั้งคู่:

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

เนื่องจาก LESS กำหนด @counter ด้วยคำจำกัดความสุดท้ายของตัวแปรในขอบเขตนั้น มันไม่ได้ใส่ใจกับลำดับของการเรียกที่ใช้ @counter แต่ทำหน้าที่เหมือน CSS มากและคำนึงถึง "การเรียงซ้อน" ของตัวแปรด้วย

สำหรับการสนทนาเพิ่มเติมเกี่ยวกับเรื่องนี้ใน LESS คุณอาจติดตามการสนทนาที่เกิดขึ้นใน คำขอคุณลักษณะ LESS นี้< /ก>.

Seven-phases-max เชื่อมโยงกับสิ่งที่เขาเชื่อว่าเป็นข้อบกพร่องใน LESS แต่ฉันไม่คิดว่ามันจะเป็น แต่ดูเหมือนว่าฉันจะใช้การรีเซ็ตตัวนับแบบเรียกซ้ำอย่างสร้างสรรค์เพื่อให้ได้ผลลัพธ์ตามที่ต้องการ สิ่งนี้ช่วยให้คุณบรรลุสิ่งที่คุณต้องการได้ (ใช้โค้ดตัวอย่างของฉัน):

// 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");

นี่คือเอาต์พุต CSS:

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

หมายเหตุ: ฉันเชื่อว่าคุณไม่ได้เปลี่ยนแปลงค่าส่วนกลางที่นี่อย่างเคร่งครัด แต่เป็นการตั้งค่าท้องถิ่นใหม่ด้วยการเรียกแต่ละครั้งเป็น .someSelector ไม่ว่าจะเกิดจากพฤติกรรมแบบรถบั๊กกี้หรือไม่นั้นยังเป็นที่น่าสงสัย แต่ถ้าเป็นเช่นนั้น วิธีแก้ไขปัญหานี้อาจหายไปในอนาคต หากต้องการความคิดเห็นเพิ่มเติมเกี่ยวกับข้อจำกัดของวิธีนี้ ดูการสนทนาที่นี่