New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error with Sass maps #71

Closed
1stevengrant opened this Issue Jul 17, 2014 · 10 comments

Comments

Projects
None yet
8 participants
@1stevengrant

1stevengrant commented Jul 17, 2014

I have a simple Gulp task to compile my Sass:

gulp.task('sass', function() {
    return gulp.src(['./src/scss/style.scss'])
        .pipe(sass({
            sourceMap: 'sass',
            sourceComments: 'none'
        }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('public_html/build/css'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('public_html/build/css'))
        .pipe(notify("Hey y'all, I just built the CSS"))
});

but currently it chokes on:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error in plugin 'gulp-sass'
/Users/steven/Sites/tgc2014/src/scss/icons:6: error: error reading values after arrow-down

    at opts.error (/Users/steven/Sites/tgc2014/node_modules/gulp-sass/index.js:67:17)
    at onError (/Users/steven/Sites/tgc2014/node_modules/gulp-sass/node_modules/node-sass/sass.js:73:16)

The icons partial looks like:

// Declare icon font
@include font-face('icons', '../fonts/icons/icons');

// List icons
$icons: (
    arrow-down: "\f100",
    arrow-left: "\f101",
    arrow-right: "\f102",
    arrow-up: "\f103",
    envelop: "\f104",
    facebook: "\f105",
    googleplus: "\f106",
    grid: "\f107",
    menu: "\f108",
    pinterest: "\f109",
    print: "\f10a",
    tumblr: "\f10b",
    twitter: "\f10c",
    youtube: "\f10d",
);

// Use to apply icons
@mixin icon($position: before, $icon: false, $styles: true) {
    @if $position == both {
        $position: 'before, &:after';
    }
    &:#{$position} {
        @if $icon {
            content: "#{map-get($icons, $icon)}";
        }
        @if $styles {
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-family: 'icons';
        }
        @content;
    }
}

I've seen some other issues with libsass and source map support but none of the suggestions are working.

Any guesses?

@geierdmtr

This comment has been minimized.

Show comment
Hide comment
@geierdmtr

geierdmtr Jul 31, 2014

I have the same issue, any solutions?

geierdmtr commented Jul 31, 2014

I have the same issue, any solutions?

@jjshammas

This comment has been minimized.

Show comment
Hide comment
@jjshammas

jjshammas commented Aug 5, 2014

+1

@xpepermint

This comment has been minimized.

Show comment
Hide comment
@xpepermint

xpepermint Aug 6, 2014

+1 (works with gulp-ruby-sass)

xpepermint commented Aug 6, 2014

+1 (works with gulp-ruby-sass)

@dlmanning

This comment has been minimized.

Show comment
Hide comment
@dlmanning

dlmanning Aug 12, 2014

Owner

The problem here is that you're using syntax that hasn't been implemented in libsass yet.

Owner

dlmanning commented Aug 12, 2014

The problem here is that you're using syntax that hasn't been implemented in libsass yet.

@dlmanning dlmanning closed this Aug 12, 2014

@esbenjuul

This comment has been minimized.

Show comment
Hide comment
@esbenjuul

esbenjuul Sep 12, 2014

Please fix this issue <3

esbenjuul commented Sep 12, 2014

Please fix this issue <3

@dlmanning

This comment has been minimized.

Show comment
Hide comment
@dlmanning

dlmanning Sep 12, 2014

Owner

@esbenjuul It isn't a gulp-sass issue

Owner

dlmanning commented Sep 12, 2014

@esbenjuul It isn't a gulp-sass issue

@lunelson

This comment has been minimized.

Show comment
Hide comment
@lunelson

lunelson Sep 16, 2014

This problem, while not an 'issue' for this repo, can be solved with a polyfill https://github.com/lunelson/sass-list-maps

lunelson commented Sep 16, 2014

This problem, while not an 'issue' for this repo, can be solved with a polyfill https://github.com/lunelson/sass-list-maps

@r4fx

This comment has been minimized.

Show comment
Hide comment
@r4fx

r4fx Nov 18, 2014

I found the issue here sass/libsass#605

r4fx commented Nov 18, 2014

I found the issue here sass/libsass#605

@dlmanning

This comment has been minimized.

Show comment
Hide comment
@dlmanning

dlmanning Nov 18, 2014

Owner

@lunelson : I don't think polyfilling sass functionality is appropriate for the scope of this project.

Owner

dlmanning commented Nov 18, 2014

@lunelson : I don't think polyfilling sass functionality is appropriate for the scope of this project.

@lunelson

This comment has been minimized.

Show comment
Hide comment
@lunelson

lunelson Nov 18, 2014

@r4fx that libsass issue is unrelated. maps are a SassScript data-type, not to do with source-maps. Maps have been implemented in the latest 3 or 4 releases of libsass, but node-sass, which gulp-sass depends on, may be a few releases behind.

@dlmanning I wasn't suggesting that gulp-sass should polyfill anything—it was a note to the OP that there was an interim solution.

lunelson commented Nov 18, 2014

@r4fx that libsass issue is unrelated. maps are a SassScript data-type, not to do with source-maps. Maps have been implemented in the latest 3 or 4 releases of libsass, but node-sass, which gulp-sass depends on, may be a few releases behind.

@dlmanning I wasn't suggesting that gulp-sass should polyfill anything—it was a note to the OP that there was an interim solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment