"Compact" Function in Bourbon with SASS Not Called

Compact function in Bourbon with SASS not called

Ok so after diving a bit deeper here is how I fixed it.

This problem is probably being caused because of this commit:
https://github.com/thoughtbot/bourbon/commit/ac07c990c0d0fe16f4c455490c9a9fdff7fe27af

The compact function has been rewritten in Ruby to better integrate with Rails.
Initially I just copy pasted the 'stylesheet' folder from the repo. And thats when I started false sytax.

I fixed the error by reading the instructions :) - the instruction on how to install it in Rails and then it worked.

In your case, idk if they have a codekit implementation but I believe you can fix it by adding the following code:

@function compact($var-1,        $var-2: false,
                  $var-3: false, $var-4: false,
                  $var-5: false, $var-6: false,
                  $var-7: false, $var-8: false,
                  $var-9: false, $var-10: false) {
  $full: $var-1;
  $vars: $var-2, $var-3, $var-4, $var-5,
         $var-6, $var-7, $var-8, $var-9, $var-10;

  @each $var in $vars {
    @if $var {
      $full: $full, $var;
    }
  }
  @return $full;
}

(I got the code from the repo)

in a file name _function.scss inside your addons folder and reference it in _bourbon.scss. And that should fix your problem.

Library for `compact` not loaded

Is this Stackoverflow answer helpful for getting your compact function working?

Original Answer to Original Question (for posterity)

compact() is not valid CSS. Your generated CSS contains multiple references and Chrome disregards rules it doesn't know how to interpret.

compact() issue with compass

I think the likely problem is that the compact() function is defined in Ruby by Compass, so is not being included. The easiest solution is to reimplement the function in Sass.

Somebody else posted the appropriate solution here: "Compact" function in Bourbon with SASS not called

Gulp sass different folders into one CSS file

This is how I setup my gulp file for my CSS.

I have multiple destinations that I use in my projects but this should help point you in the right direction.

You can also use SassGlob to glob in all scss / sass / css files from a main directory.

gulp.task('scss', function() {

    return gulp.src('src/sass/styles.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sassGlob())
        .pipe(sass({
            compass: false,
            includePaths: [
                './bower_components/susy/sass',
                './bower_components/susy/lib',
                './bower_components/susy/sass/susy',
                './bower_components/breakpoint-sass/stylesheets',
                require('node-bourbon').includePaths
            ],
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(prefix())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(gulp.dest('assets/css'))
        .pipe(reload({
            stream: true
        }));
});

---

Related Topics