Sass .scss: การทำรังและหลายคลาส?

ฉันใช้ Sass (.scss) สำหรับโครงการปัจจุบันของฉัน

ตัวอย่างต่อไปนี้:

HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

มันใช้งานได้ดี

ฉันสามารถจัดการหลายคลาสในขณะที่ใช้สไตล์ที่ซ้อนกันได้หรือไม่

ในตัวอย่างข้างต้นฉันพูดถึงเรื่องนี้:

CSS

.container.desc {
    background:blue;
}

ในกรณีนี้div.containerปกติจะเป็นredแต่div.container.descจะเป็นสีน้ำเงิน

ฉันจะวางสิ่งนี้ไว้ข้างในcontainerด้วย Sass ได้อย่างไร

คุณสามารถใช้การอ้างอิงตัวเลือกหลัก &มันจะถูกแทนที่ด้วยตัวเลือกหลักหลังจากการรวบรวม:

สำหรับตัวอย่างของคุณ:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

สมบูรณ์จะแก้ไขดังนั้นหากเลือกผู้ปกครองของคุณซ้อนตัวเองทำรังจะได้รับการแก้ไขก่อนที่จะเปลี่ยน &&

สัญกรณ์นี้มักใช้ในการเขียนองค์ประกอบเทียมและ -classes :

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

อย่างไรก็ตามคุณสามารถวาง&ตำแหน่งใดก็ได้ที่คุณชอบ^*ดังนั้นจึงเป็นไปได้เช่นกัน:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

อย่างไรก็ตามโปรดทราบว่าสิ่งนี้จะทำลายโครงสร้างการซ้อนของคุณและอาจเพิ่มความพยายามในการค้นหากฎเฉพาะในสไตล์ชีทของคุณ

*: ไม่มีตัวละครอื่น ๆ &กว่าช่องว่างจะได้รับอนุญาตในด้านหน้าของ ดังนั้นคุณไม่สามารถเชื่อมต่อโดยตรงกับselector+ &- #id&จะทำให้เกิดข้อผิดพลาด

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

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

CSS

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

รหัสข้างต้นจะขึ้นอยู่กับวิธีการ BEM ในแบบแผนการตั้งชื่อชั้นเรียน คุณสามารถตรวจสอบลิงค์นี้: BEM - วิธีการแก้ไของค์ประกอบของบล็อก

คำตอบของ Christoph นั้นสมบูรณ์แบบ บางครั้งคุณอาจต้องการไปเรียนมากกว่าหนึ่งครั้ง ในกรณีนี้คุณสามารถลอง@at-rootและ#{}คุณสมบัติ CSS ซึ่งจะช่วยให้สองชั้นรากที่จะนั่งถัดจากแต่ละอื่น ๆ &ที่ใช้

สิ่งนี้จะไม่ทำงาน (เนื่องจากnothing before &กฎ):

container {
    background:red;
    color:white;
    
    .desc& {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

แต่นี่จะ (ใช้@at-root plus #{&}):

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}