CSS VS SASS (SCSS) - 기본 클래스 문제 및 중복 사용

Question

SCSS를 사용하여 CSS를 정리하려고합니다.

표준 CSS :

.dark-hr,
.light-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  background-color: #595959;
}
.light-hr {
  background-color: #cccccc;
}

vs scss :

.generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @extend .generic-hr;
  background-color: #595959;
}
.light-hr {
  @extend .generic-hr;
  background-color: #cccccc;
}

사용되지 않는 '일반 -HR'클래스를 만드는 것을 피할 수있는 방법이 있습니까? 나는 어떤 종류의 둥지가 잘 작동하기를 바랬다. 이 시나리오에서는 CSS가 확실히 SCSS보다 클리너와 더 읽기 쉽습니다.

이상적으로 나는 이것이 SCSS에서 일할 필요가있다 :

.## {
  // base class that is not outputted
  .dark-hr {
    //attributes the extend the base class '.##'
  }
  .light-hr {
    //attributes the extend the base class '.##'
  }
}

산출:

 .dark-hr, .light-hr {
   //shared attributes defined by '.##'
 }
 .dark-hr {
   // overrides
 }
 .light-hr {
   // overrides
 }

Answer 1

당신이 사용하고 싶은 것은 아닙니다 클래스 확장 (나는 그들에게 "자동 수업"이라고 부른다). % A 대신에 ..

hr%base { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @extend hr%base;
  background-color: #595959;
}
.light-hr {
  @extend hr%base;
  background-color: #cccccc;
}

Answer 2

일반적 으로이 일을하는 것을하는 것은 아닙니다.

.generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
  &.dark {
    background-color: #595959;
  }
  &.light {
    background-color: #cccccc;
  }
}

Answer 3

이런 종류의 패턴은 mixin입니다.

@mixin generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @include generic-hr;
  background-color: #595959;
}
.light-hr {
  @include generic-hr;
  background-color: #cccccc;
}

이것은 확장 가능에 대한 이점이 추가되므로 정말로 유사한 속성을 갖춘 여러 선택자가 필요한 경우 변수를 추가 할 수 있습니다.

@mixin generic-hr($background-color: transparent) { 
  width: 100%;
  height: 1px;
  margin: 15px 0px; 
  background-color: $background-color;
}
.dark-hr {
  @include generic-hr(#595959);
}
.light-hr {
  @include generic-hr(#cccccc);
}
.medium-hr {
  @include generic-hr(#818181);
}