[Solved] Adventures with SASS ampersand

[elneco]

Dear Forums,

Im trying to do this:
http://codepen.io/jq/pen/gbpNvx

any ideas?
-Jaime

[Paulie_D]

This..

p.a { color: green; }

…is not a parent selector. It’s a p with a class of ‘a’.

The ampersand selects the parent selector not the parent style.

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

[elneco]

I understand. In this case I want to combine my parent selector .a with the p tag nested in that block.

Does anyone know of a way to do this?

[Paulie_D]

In this case I want to combine my parent selector .a with the p tag nested in that block.

Yes but that’s

.a p { color: green; }

not

p.a { color: green; }

[Paulie_D]

This SCSS

p {
  color: red;
   .a & {
    color: green;
  }
 }

compiles to

p {
  color: red;
}
.a p {
  color: green;
}

[elneco]

heres another way to think about what Im trying to accomplish:

In the style block for .a {} – I want to check if this class is attached to a particular tag. If that tag is a p tag I want to alter the styles for that scenario.

I would like to know if this can be accomplished in that same style block?

[Paulie_D]

In the style block for .a {} – I want to check if this class is attached to a particular tag. If that tag is a p tag I want to alter the styles for that scenario.

CSS can’t ‘check’ anything…it can only style based on a selector.

http://codepen.io/Paulie-D/pen/yyNmrJ

Basically, I don’t think you can define what you are after within the ‘a’ style block….it just doesn’t work that way….AFAIK.

[__]

there’s no reason to complicate this.

.a
    color: red
p.a
    color: green

[elneco]

ok looks like this really isn’t possible in sass at the moment:
‘& must appear at the beginning of a compound selector’
http://sass-lang.com/documentation/file.SASS_REFERENCE.html

[elneco]

SO this is now possible in Sass – here is the solution:
.class-name {
@at-root {
a#{&} {
color: fourteen;
}
}
}

props: https://twitter.com/antimytheme/status/757712441753108481

[Author]

Posts