SCSS에 다른 수업 포함

SCSS에 다른 수업 포함

---

SCSS 파일에 다음이 있습니다.

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

.class-b{

 //Inherite class-a here

 //some properties
}

클래스 b에서 모든 속성과 중첩 선언을 상속하고 싶습니다 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 또는 개발 도구에서 선택기를 찾는 것이 거의 불가능합니다. 믹스 인은 믹스 인 코드를 복제하고 추가 스타일을 추가합니다.

이 sassmeister 에서 @extend와 @mixin의 차이점을 볼 수 있습니다

---

다른 옵션은 속성 선택기를 사용할 수 있습니다.

[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의 속성 선택기에 대한 추가 정보

---

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

참고 URL : https://stackoverflow.com/questions/9560170/include-another-class-in-scss