Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/* 
 * Works
 */

// Works as expected
@mixin okay($foo: bar) {
  [data-attribute="#{$foo}"]:before,
  [data-another-attribute="#{$foo}"]:after {
    content: "Okay!";
  }
}

/* Expected Output */
[data-attribute="bar"]:before,
[data-another-attribute="bar"]:after {
  content: "Okay!";
}

/* Actual Output */
@include okay;



/* 
 * Doesn’t work
 */

// When adding another line with a class `.#{$foo}:before`
// the line break between the two data-attribute selectors
// gets replaced by an \a. This breaks the CSS. :(

@mixin not-okay($foo: bar) {
  .#{$foo}:before,
  [data-attribute="#{$foo}"]:before,
  [data-another-attribute="#{$foo}"]:before {
    content: "There is an \a in the generated CSS!";
  }
}

/* Expected Output */
.bar:before,
[data-attribute="bar"]:before,
[data-another-attribute="bar"]:before {
  content: "There is an \a in the generated CSS!";
}

/* Actual Output */
@include not-okay;

SassMeister-output.css

@charset "UTF-8";
/* 
 * Works
 */
/* Expected Output */
[data-attribute="bar"]:before,
[data-another-attribute="bar"]:after {
  content: "Okay!";
}

/* Actual Output */
[data-attribute="bar"]:before,
[data-another-attribute="bar"]:after {
  content: "Okay!";
}

/* 
 * Doesn’t work
 */
/* Expected Output */
.bar:before,
[data-attribute="bar"]:before,
[data-another-attribute="bar"]:before {
  content: "There is an \a in the generated CSS!";
}

/* Actual Output */
.bar:before,
[data-attribute="bar"]:before, \a [data-another-attribute="bar"]:before {
  content: "There is an \a in the generated CSS!";
}