[inheritance] SCSS에 다른 수업 포함

Program / 글쓴이

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의 차이점을 볼 수 있습니다

답변

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

답변