K
K
Kirill Popolov2014-12-19 17:39:08
css
Kirill Popolov, 2014-12-19 17:39:08

How to get rid of redundant inheritance in scss?

Hello.
I have a button class, a button element, and an input with a button type.
.btn, button, [type="button"] {}
There are also a few elements that inherit from .btn
. As a result, when I try to use a:not(.btn), I get a whole huge footcloth that does not work because nested selectors are wedged.

a:not(.btn):not(button):not(.fine .select):not([type=button])

It seems to me that it is possible to make an admixture with the necessary styles, or inherit for everything from some independent class (adds an extra unused class to css).
Maybe there are some other options?
note: sass version is 3.1.9
UPD:
in order not to give a huge amount of related code, a small demo piece:
scss:
.newClass {
  display: inline-block;
}
.fancy {
  .select {
    @extend .newClass;
  }
}
.label:not(.newClass) {
  display: block;
}

css:
.newClass,.fancy .select {
    display: inline-block
}

.label:not(.newClass):not(.fancy .select) {
    display: block
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Viktor Vsk, 2014-12-19
@viktorvsk

Either the question is not well-posed, or it looks like nonsense

.label.newClass{ display: inline-block; }
.label{ display: block; }

A :not, at least in this case - this is some kind of crutch

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question