รวมคลาสอื่นใน SCSS

ฉันมีสิ่งนี้ในไฟล์ SCSS ของฉัน:

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

ในชั้น B, ผมอยากจะ inherite class-aคุณสมบัติและการประกาศที่ซ้อนกันของ สิ่งนี้ทำได้อย่างไร ฉันพยายามใช้@include class-aแต่นั่นก็แค่เกิดข้อผิดพลาดเมื่อรวบรวม

ดูเหมือน@mixinและ@includeไม่จำเป็นสำหรับเคสธรรมดาอย่างนี้

หนึ่งสามารถทำได้:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

ลองสิ่งนี้:

1. สร้างคลาสพื้นฐานของตัวยึดตำแหน่ง (% base-class) ด้วยคุณสมบัติทั่วไป
2. ขยายคลาสของคุณ (.my-base-class) ด้วยตัวยึดตำแหน่งนี้

3. ตอนนี้คุณสามารถขยาย% base-class ในคลาสใดก็ได้ของคุณ (เช่น. my-class)

   %base-class {
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
   }
   
   .my-base-class {
       @extend %base-class;
   }
   
   .my-class {
       @extend %base-class;
       margin-bottom: 40px;
   }
   

การใช้ @extend เป็นวิธีการแก้ปัญหาที่ดี แต่โปรดทราบว่า css ที่คอมไพล์แล้วจะแยกการกำหนดคลาส คลาสใดก็ตามที่ขยายตัวยึดตำแหน่งเดียวกันจะถูกจัดกลุ่มเข้าด้วยกันและกฎที่ไม่ได้ขยายในชั้นเรียนจะอยู่ในคำจำกัดความแยกต่างหาก หากมีหลายคลาสที่ขยายออกไปมันอาจกลายเป็นเรื่องไม่เชื่อฟังในการค้นหาตัวเลือกใน css ที่รวบรวมหรือเครื่องมือ dev ในขณะที่มิกซ์อินจะทำซ้ำโค้ดมิกซ์อินและเพิ่มสไตล์เพิ่มเติม

คุณสามารถเห็นความแตกต่างระหว่าง @extend และ @mixin ในsassmeisterนี้

@extend .myclass;
@extend #{'.my-class'};

ตัวเลือกอื่นอาจใช้ตัวเลือกแอททริบิวต์:

[class^="your-class-name"]{
  //your style here
}

ในขณะที่ทุกคลาสที่ขึ้นต้นด้วย "your-class-name" ใช้สไตล์นี้

ดังนั้นในกรณีของคุณคุณสามารถทำได้เช่น:

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

เพิ่มเติมเกี่ยวกับตัวเลือกคุณสมบัติในw3Schools