CODEWITHSUNDEEP
sasscss-selectors
Laurence Fass
Laurence Fass

Reputation: 1942

Can i use css attribute selector within a SASS class to style itself

I am trying to style a class using css attribute selectors to apply to the class itself. My use case is to wrap them in media selectors to style a class when a breakpoint applies but I want to keep the example simple and work from first principles.

I have a sandbox for the following code here

Here's my logic... In SCSS we can style a class itself using &

i.e.

.myclass {
 & {
  border: ...
 }
}

and we can refine that to specific class combinations

.myclass {
 &.otherclass {
  border: ...
 }
}

we can also style classes using attribute selectors

  div[class*="md"] {
    border: 10px solid orange;
  }

Can we combine these to use them within a sass class to say "style classes according to an attribute selector within the class scope only to combine the & and div[class*="value"] specifiers?

i.e. for

      <div className="test1">
        <div className="xs md">I am styled using div[class*="md"] selector</div>
      </div>
      <div className="test2 xs md">
        I am not styled by my selector. Can I style myself using attribute
        selectors?
      </div>

with style

.test1 {
  & {
    background: lightblue;
  }

  div[class*="md"] {
    border: 10px solid blue;
  }
}

.test2 {
  & {
    background: lightgreen;
  }

  div[class*="md"] {
    border: 10px solid green;
  }
}

can I style .test2.md from within the class similar to using &?

thanks

Upvotes: 0

Views: 1333

Answers (1)

Arjit Tiwari
Arjit Tiwari

Reputation: 508

Do you want to do this

.test2 {
  & {
    background: lightgreen;
  }

  &[class*="md"] {
    border: 10px solid green;
  }
}

Upvotes: 1

Related Questions