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

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

i'm trying clean css cleaner 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 way avoid creating 'generic-hr' class won't used? hoping kind of nest work well. in scenario css way cleaner , more readable scss.

ideally need work in scss:

.## { // base of operations class not outputted .dark-hr { //attributes extend base of operations class '.##' } .light-hr { //attributes extend base of operations class '.##' } }

output:

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

what you're wanting utilize extend class (i phone call them "silent classes"), signified using % instead of ..

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

css sass oocss precompiler