-1

This is what I have in LESS:

.light-hatching {
  background-image: url('./assets/bg-button-default.png');
  background-repeat: repeat;
  background-color: lighten(#f9f9f9, 2%);
}

.btn-default {
  .light-hatching;
}

Notice that btn-default is nesting light-hatching. This does not work in Sass. In the guide, they say I can do nesting exactly like it works on LESS, but it does work.

How do I achieve the same as the same LESS example in Sass?

Andre Pena
  • 56,650
  • 48
  • 196
  • 243
  • 1
    What you're doing is *not* called "nesting". – cimmanon Jan 21 '16 at 23:20
  • @cimmanon I didn't know that.. By the answer, which I'll accept shortly, I see it's called extension – Andre Pena Jan 21 '16 at 23:22
  • Actually, what you're doing is called mixins. In LESS every selector is actually a mixin without parameters. [Extend](http://lesscss.org/features/#extend-feature) might have similar effects in most cases, but it won't produce the same results as your LESS code. And might even get you in trouble with media queries. Sass doesn't support the functionality you're demonstrating with your LESS code. – gligoran Jun 09 '16 at 21:31

1 Answers1

0

I think what you're looking for is @extend, which imports the styles from another selector (or placeholder).

.btn-default {
    @extend .light-hatching;
}
probablyup
  • 7,636
  • 1
  • 27
  • 40
  • 1
    This answer is misleading, as using `@extend` extend won't give you the same result, as the OP's example would give you in LESS. In LESS, the styles would get copied over to the `.btn-default` selector, while in SCSS, the `.btn-default` selector would get added to `.light-hatching`. This becomes ever more apparent when you want to `@extend` more than one selector. – gligoran Jun 07 '16 at 14:12
  • 1
    No it doesn't. Take a look at this SassMeister gist: http://www.sassmeister.com/gist/816aa35741b276d7670bdbfd3e6a7036. It just attaches the `.btn-default` to the two other classes, rather than copying their rule sets into the `.btn-default` like LESS would. – gligoran Jun 09 '16 at 21:23