Making use of CSS vs Sass (SCSS) - base class issues and redundency

Question

I'm trying to clean up my CSS to be cleaner by using SCSS.

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

Is there any way to avoid creating the 'generic-hr' class that won't be used? I was hoping that some kind of nest would work well. In this scenario the CSS is definitely way cleaner and more readable than SCSS.

Ideally I would need this to work in SCSS:

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

OUTPUT:

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

you could use `[class*='-hr']` , which basically means any class that has `-hr` in it, at least then you won't need to `@extend` everytime and if you chose to add more `.-hr` classes, you won't need to edit/extend anything — ashley, Feb 06 '13 at 10:36
@ashley You *could* do it that way, but what happens if you need to add a class that doesn't have the "-hr" suffix, but extends `.light-hr`? You have to remember to extend `[class*='-hr']` as well, which is easily forgotten if the project has been set aside for a few months. — cimmanon, Feb 06 '13 at 17:38

score 5 · Accepted Answer · answered Feb 06 '13 at 12:40

What you're wanting to use is an extend class (I call them "silent classes"), which is signified by using a % instead of 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;
}

score 1 · Answer 2 · answered Feb 06 '13 at 10:38

1

Wouldn't you normally do something like this:

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

answered Feb 06 '13 at 10:38

StuR

12,042
9
45
66

That would include `.generic-hr` in the output. See @cimmanon's answer. – Owen Nov 19 '13 at 12:03

score 1 · Answer 3 · answered Feb 08 '13 at 21:28

My pattern for this kind of thing is a 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;
}

This has the added advantage of being extensible, so if you find yourself needing several selectors with really similar properties you can add in variables:

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

Also a good solution. I prefer the extend answer though because A) mixins are usually in their own files and B) is closer to my original required solution. Your solution **could** however mean less code. Wish I could mark 2 answers as correct. :( — DynamicDan, Dec 09 '13 at 17:09

Making use of CSS vs Sass (SCSS) - base class issues and redundency

3 Answers3