الاستفادة من CSS VS SASS (SCSS) - قضايا الفئة الأساسية وإعادة القدم

Question

أحاول تنظيف CSS الخاص بي لتكون نظافة باستخدام SCSS.

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;
}

هل هناك أي طريقة لتجنب إنشاء فئة "عام الموارد البشرية" التي لن يتم استخدامها؟ كنت آمل أن تعمل نوع العش جيدا. في هذا السيناريو، فإن 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

ما تريد استخدامه هو تمديد الفئة (أدعوهم "فصول صامتة")، والتي تدل على استخدام % بدل من ..

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);
}