CODEWITHSUNDEEP
sass
Már Örlygsson
Már Örlygsson

Reputation: 14606

What is the SASS equivalent of additive mixin definitions in LESS?

Is there a way to have SASS emulate the way LESS concatenates repeated mixin definitions (redefining a mixin in LESS doesn't overwrite the original).

For instance, would it be possible to push a block of CSS rules into a buffer, and then flush them all at once?

Example:

With LESS I'd do this:

// _menu.less
#_base ()    { .menu{ /*styles*/ }  }
#_mobile ()  { .menu{ /*styles*/ }  }
#_desktop () { .menu{ /*styles*/ }  }

...

// _widget.less
#_base ()    { .widget{ /*styles*/ }  }
#_mobile ()  { .widget{ /*styles*/ }  }
#_desktop () { .widget{ /*styles*/ }  }

...

and then:

// styles.less
@import "_menu.less";
@import "_widget.less";

@media screen { #_base(); }
@media screen and (max-width:700px) { #_mobile(); }
@media screen and (min-width:701px) { #_desktop(); }

...

// styles-oldie.less
@import "_menu.less";
@import "_widget.less";

@media screen {
    #_base();
    #_desktop();
}

Upvotes: 2

Views: 288

Answers (1)

KnutSv
KnutSv

Reputation: 748

To the best of my knowledge, there is no way to replicate what you want to achieve by building on to existing mixins. If you define a mixin two times, the second will overwrite the first. See example

AFAIK the common practice in Sass is to use media query mixins inside the selector to keep the code clean and readable. Breakpoint is a popular library that adds a lot of nice functionality for doing this.

An example of the code would be.

@import "breakpoint";

$medium: 600px;
$large: 1000px;

$breakpoint-no-queries: false;          // Set to true to ignore media query output
$breakpoint-no-query-fallbacks: true;   // Set to true to output no-query fallbacks
$breakpoint-to-ems: true;               // Change px to ems in media-queries

.menu {
  content: "base";

  // Mobile styles
  @include breakpoint(min-width $medium - 1) {
    content: "mobile";
  }

  // Tablet styles
  @include breakpoint($medium $large) {
    content: "tablet";
  }

  // Desktop styles with no-query fallback
  @include breakpoint($large, $no-query: true) {
    content: "large";
  }

}

This could output (depending on your settings)

.menu {
  content: "base";
  content: "large";
}
@media (min-width: 37.4375em) {
  .menu {
    content: "mobile";
  }
}
@media (min-width: 37.5em) and (max-width: 62.5em) {
  .menu {
    content: "tablet";
  }
}
@media (min-width: 62.5em) {
  .menu {
    content: "large";
  }
}

You can play around with the settings here

I often have a stylesheet for modern browsers that support media queries set up like this:

// main.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: false;

@import "imports";

And another stylesheet for older browsers that don't support media queries

// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: true;

@import "imports";

Upvotes: 1

Related Questions