Creates quotation marks in Foundation 5.5.2 Magellan Class

[devshack]

MacOS X 10.11.3 / Node.js v5.6.0 / node-sass 3.4.2 / grunt-sass 1.1.0

When using node-sass (via Grunt) with the SCSS of the Foundation Framework 5.5.2, the output creates quotation marks for this code:

@function data($attr) {

  @return '[data-' + $attr + ']';
}

$include-html-magellan-classes: 1 !default;

$magellan-bg: #ffffff !default;
$magellan-padding: 10px !default;


  @if $include-html-magellan-classes {

    #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} {
      background: $magellan-bg;
      min-width: 100%;
      padding: $magellan-padding;
      z-index: 50;

      .sub-nav {
        margin-bottom: 0;
        dd { margin-bottom: 0; }
        a {
          line-height: 1.8em;
        }
      }
    }

  }

Expected result (works with ruby sass, too):

[data-magellan-expedition], [data-magellan-expedition-clone] {
  background: #ffffff;
  min-width: 100%;
  padding: 10px;
  z-index: 50; }
  [data-magellan-expedition] .sub-nav, [data-magellan-expedition-clone] .sub-nav {
    margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
      margin-bottom: 0; }
    [data-magellan-expedition] .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
      line-height: 1.8em; }

Result with node-sass (latest and 3.5.0 beta 1):

"[data-magellan-expedition]", [data-magellan-expedition-clone] {
  background: #ffffff;
  min-width: 100%;
  padding: 10px;
  z-index: 50; }
  "[data-magellan-expedition]" .sub-nav, [data-magellan-expedition-clone] .sub-nav {
    margin-bottom: 0; }
    "[data-magellan-expedition]" .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
      margin-bottom: 0; }
    "[data-magellan-expedition]" .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
      line-height: 1.8em; }

This is pretty bad, since this results in not working css. Any ideas / questions? :/

[xzyfer]

There are some known issues with interpolation in the new beta. Please open
an issue with LibSass.
On Feb 24, 2016 8:26 PM, "Boris Bojic" notifications@github.com wrote:

MacOS X 10.11.3 / Node.js v5.6.0 / node-sass 3.4.2 / grunt-sass 1.1.0

When using node-sass (via Grunt) with the SCSS of the Foundation Framework
5.5.2, the output creates quotation marks for this code:

@function data($attr) {

@return '[data-' + $attr + ']';
}

$include-html-magellan-classes: 1 !default;

$magellan-bg: #ffffff !default;
$magellan-padding: 10px !default;

@if $include-html-magellan-classes {

#{data('magellan-expedition')}, #{data('magellan-expedition-clone')} {
  background: $magellan-bg;
  min-width: 100%;
  padding: $magellan-padding;
  z-index: 50;

  .sub-nav {
    margin-bottom: 0;
    dd { margin-bottom: 0; }
    a {
      line-height: 1.8em;
    }
  }
}

}

Expected result (works with ruby sass, too):

[data-magellan-expedition], [data-magellan-expedition-clone] {
background: #ffffff;
min-width: 100%;
padding: 10px;
z-index: 50; }
[data-magellan-expedition] .sub-nav, [data-magellan-expedition-clone] .sub-nav {
margin-bottom: 0; }
[data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
margin-bottom: 0; }
[data-magellan-expedition] .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
line-height: 1.8em; }

Result with node-sass (latest and 3.5.0 beta 1):

"[data-magellan-expedition]", [data-magellan-expedition-clone] {
background: #ffffff;
min-width: 100%;
padding: 10px;
z-index: 50; }
"[data-magellan-expedition]" .sub-nav, [data-magellan-expedition-clone] .sub-nav {
margin-bottom: 0; }
"[data-magellan-expedition]" .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
margin-bottom: 0; }
"[data-magellan-expedition]" .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
line-height: 1.8em; }

This is pretty bad, since this results in not working css. Any ideas /
questions? :/

—
Reply to this email directly or view it on GitHub
#1397.

[devshack]

But it appears in node-sass 3.4.2, too (not only in the beta).

Node-sass 3.4.2 seems to use libsass 3.3.2:

node node_modules/.bin/node-sass --version
node-sass   3.4.2   (Wrapper)   [JavaScript]
libsass     3.3.2   (Sass Compiler) [C/C++]

Sassc (which works as expected) is using 3.3.3:

sassc -v
sassc: 3.3.0
libsass: 3.3.3
sass2scss: 1.0.5

[xzyfer]

Alrighty. Either way it's a bug in LibSass.
On Feb 24, 2016 8:44 PM, "Boris Bojic" notifications@github.com wrote:

But it appears in node-sass 3.4.2, too (not only in the beta).

—
Reply to this email directly or view it on GitHub
#1397 (comment).

[devshack]

A bug in libsass 3.3.2, then (since it's working in 3.3.3)?

[xzyfer]

Both if it's still happening in the beta.
On Feb 24, 2016 9:25 PM, "Boris Bojic" notifications@github.com wrote:

A bug in libsass 3.3.2, then (since it's working in 3.3.3)?

—
Reply to this email directly or view it on GitHub
#1397 (comment).

[devshack]

You're right: sass/libsass#1770
It's supposed to be fixed in libsass 3.3.3 ... so, when does node-sass gets updated to it? ;)

EDIT: I reinstalled node-sass 3.5.0 beta 1 - it works fine without the bug.