1

Is there a way to write this css:

div.some-class{
  ...
}
span.some-class{
  ...
}

as something like this using scss?

.some-class{
  &div{
    ...
  }
  &span{
    ...
  }
}

I tried the above, but it returns an error.

sawa
  • 165,429
  • 45
  • 277
  • 381
  • The reason that doesn't work is because [type selectors always come first](http://www.w3.org/TR/selectors/#selector-syntax). You make no mention of what kind of error it is, so I don't know if it's compiling into invalid CSS or it's throwing an error on compile. Either way, it is not valid. – BoltClock Jan 16 '13 at 18:52
  • @BoltClock The error is from scss. I am looking for a way to express that in scss. There is no problem with the css as long as the scss outputs as what I describe. `&` is not css anyway; its scss. – sawa Jan 16 '13 at 18:53
  • 1
    Even if `&div` worked the way you might have expected, it would have generated invalid CSS because the order is incorrect. – cimmanon Jan 16 '13 at 18:59
  • 2
    @cimmanon I don't think it's a duplicate – Yehuda Katz Jan 16 '13 at 19:43
  • @YehudaKatz It would be an exact duplicate if the OP had placed the `&` in the order it should have been to generate valid CSS. – cimmanon Jan 16 '13 at 19:45
  • Possible duplicate of [Sass combining parent using ampersand (&) with base element](http://stackoverflow.com/questions/17268051/sass-combining-parent-using-ampersand-with-base-element) – JAL Mar 03 '16 at 22:44

2 Answers2

2

It depends what you're trying to do.

The example you show will be interpreted as .some-classdiv and .some-classspan which will result in a compilation error. Essentially the ampersand represents the parent selector.

If div.some-class and span.some-class don't share the same styles, the first block you have is still the most effective way to write it.

If they share some of the same styles, you could write a mixin.

// Shared Styles
@mixin some-class {
  background: #f00;
  color: #fff;
}

div.some-class {
  @include some-class;
  ... other styles
}

span.some-class {
  @include some-class;
  ... other styles
}

You could also @extend an existing class:

.some-class {
  background: #f00;
  color: #fff;
}

div.some-class {
  @extend .some-class;
  ... other styles
}

span.some-class {
  @extend .some-class;
  ... other styles
}

If you extend an existing class, the class must be a root class included in the file (i.e. it can't be a nested class).

That said, since both elements have the class some-class, you could just as easily define regular CSS:

.some-class {
  background: #f00;
  color: #fff;
}

div.some-class {
  ... other styles
}

span.some-class {
  ... other styles
}
Tracy Fu
  • 1,632
  • 12
  • 22
  • 1
    Would like an explanation why this was downvoted? If there's incorrect information here, I would be glad to emend. – Tracy Fu Jan 16 '13 at 19:45
2

I know there's a real desire to have your code grouped together in nice neat little blocks like that, but it just isn't possible. The error you get when you compile the code is quite clear:

>>> Change detected at 14:46:18 to: test.scss
    error sass/test.scss (Line 2: Invalid CSS after "  &": expected "{", was "div{"

"div" may only be used at the beginning of a compound selector.)

Of course, if you reverse it so that it is div&, then you get this error:

>>> Change detected at 14:48:01 to: test.scss
    error sass/test.scss (Line 2: Invalid CSS after "  div": expected "{", was "&{"

"&" may only be used at the beginning of a compound selector.)

Your only option is to not nest at all.

.some-class {
    ...
}

div.some-class {
    ...
}

span.some-class {
    ...
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171