Breakpoint Slicer dosn't work with non Legacy Syntax

[jcampbell05]

Breakpoint Slicer crashes when using the modern syntax for Breakpoint.

[lolmaus]

Hi James and thank you for the report?

Could you please provide some sample code?

[jcampbell05]

I used this code, below. I tracked down the issue, Breakpoint thinks the media query Break Point Slicer is giving it is a breakpoint list and thus goes through each individual section and treats it as a seperate query (i.e "min-width" and "300px" rather than "min-width 300px")

slicer-breakpoints: 0 400px 600px 800px 1050px; // Slice numbers: | 1 | 2 | 3 | 4 | 5 →

// Set a media query @include at(3) { // Styles inside here will be applied when // browser window width is somewhere between 600px and 800px }

[lolmaus]

The code you provided works fine (provided that you add $ to the variable name and add some styles inside the mixin). You can test it yourself on http://sassmeister.com .

In order to let me investigate the issue, you'll have to provide full code, all Compass extensions' version numbers and the error stack trace.

[lolmaus]

Also make sure you're using Breakpoint and not Breakpoint.

[jcampbell05]

This Code fails in the latest version of CodeKit, "Compass was unable to compile one or more files in the project:

error Global.scss (Line 45 of _find.scss: Undefined operation: "max-width lt 600px".)

overwrite Global.css ":

//      _   ___       __    __  _                         __        _____ ___   __________    ______                                             __  
//     / | / (_)___ _/ /_  / /_(_)___  ____ _____ _____ _/ /__     / ___//   | / ___/ ___/   / ____/________ _____ ___  ___ _      ______  _____/ /__
//    /  |/ / / __ `/ __ \/ __/ / __ \/ __ `/ __ `/ __ `/ / _ \    \__ \/ /| | \__ \\__ \   / /_  / ___/ __ `/ __ `__ \/ _ \ | /| / / __ \/ ___/ //_/
//   / /|  / / /_/ / / / / /_/ / / / / /_/ / /_/ / /_/ / /  __/   ___/ / ___ |___/ /__/ /  / __/ / /  / /_/ / / / / / /  __/ |/ |/ / /_/ / /  / ,<   
//  /_/ |_/_/\__, /_/ /_/\__/_/_/ /_/\__, /\__, /\__,_/_/\___/   /____/_/  |_/____/____/  /_/   /_/   \__,_/_/ /_/ /_/\___/|__/|__/\____/_/  /_/|_|  
//          /____/                  /____//____/                                                                                                     
//  
//  Copyright Nyx Digital 2013
//  Version 1.0
//
//  ** Global.scss **
//  Use this file to configure your global styles and defaults, this should be included at the top of all of your page specific stylesheets.
//

//Leave this, this is required to import the framework itself, this must be the first line in this file.

@import "Nightinggale/Nightinggale";

/* ==========================================================================
   Base Settings
   ========================================================================== */

$legacy-support-for-ie6: true;
$legacy-support-for-ie7: true;

$smallest-screen: 400px;
$small-screen: 600px;
$large-screen: 800px;
$largest-screen: 1050px;

$slicer-breakpoints: $smallest-screen $small-screen $large-screen $largest-screen;
/*
    0                 400px     600px     800px       1050px
    ├───────────────────┼─────────┼─────────┼───────────┼─────────>
*/

/* ==========================================================================
   Grid and Layout
   ========================================================================== */

$mobile-first: true;
$grids: 12;
$grids: add-grid(1 at bp(1));
$grids: add-grid(4 at bp(2));
$grids: add-grid(8 at bp(3));
$grids: add-grid(12 at bp(4));

$gutters: 1/3;
$gutters: add-gutter(.25 at $small-screen);

/* ==========================================================================
   Colour Scheme
   ========================================================================== */

// Pick the base color for your scheme:
$cs-primary: #BE8E26;

// Select your scheme from the list and place it here:
$cs-scheme: analogic; // mono, complement, triad, tetrad, analogic, accented-analogic

// How distant do you want the hue offset to be:
$cs-hue-offset: 20;

// How distant do you want tints and shades to be from their base:
$cs-brightness-offset: 10%;

//Need to adjust them? Just redefine your colour schemes here.
$primary   : equalize(cs-primary());
$secondary : lighten(cs-secondary(), 15%);
$tertiary  : darken(cs-tertiary(), 15%);
$quadrary  : cs-quadrary();

/* ==========================================================================
   Typograthy
   ========================================================================== */

$font-size: 112.5;
$line-height: 1.65;

$body-copy-color: #444;
$heading-color: #222;

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@include animation-shake;

body {
    background: $primary;
    font-family: $font-family-sans;
    margin: 1em;
    @include contrasted($primary);

    #{headings()}{
        @include contrasted($primary);
    }

}

nav ul {
    background: $tertiary;
    padding: 10px;
    @include contrasted($tertiary);
    @include border-radius(5px);

    li {
        display: inline-block;
        margin: 0 10px 0 0;
        &:hover {
            @include animate(shake, .5s);
        }
    }
}

section > article {

    @include at(1) {
        @include grid-span(1, 1);
    }

    @include breakpoint($small-screen) {
        @include grid-span(2, 1);
    }

    @include breakpoint($large-screen) {
        @include grid-span(6, 1);
    }

    @include breakpoint($largest-screen) {
        @include grid-span(9, 1);
    }

}

aside {

    @include breakpoint($smallest-screen) {
        @include grid-span(1, 1);
    }

    @include breakpoint($small-screen) {
        @include grid-span(2, 3);
    }

    @include breakpoint($large-screen) {
        @include grid-span(2, 7);
    }

    @include breakpoint($largest-screen) {
        @include grid-span(3, 10);
    }

}

footer {
    @include isolation-span(12, 1, 'left');
}

[lolmaus]

Still works for me.

Can you please try compiling the code with compass command line tool rather than with CodeKit?

[jcampbell05]

It dosn't like it. I've worked out why.

I'm using Breakpoint (w/ Slicer) with Singularity.gs.

if I have an at mixin, with standard css or another mixin like so: @include at(2){ color: #333; }

It will work, but as soon as I include singularity: @include at(2){ @include grid-span(1, 1); }

Breakpoint Slicer does not like it. However Breakpoint does usually like Singulrity, there is something slicer does that makes it break

[lolmaus]

Hey James, thank you for your participation in investigating this issue.

Your latest example works for me. Unfortunately, i can not participate in resolving the issue unless i can reproduce it. And i will be unable to reproduce it until you provide:

• full code;
• description of your environment (including all version numbers);
• full error text and stack trace with line numbers.

By "full code" i don't mean that you should share your whole project. Instead, create a blank Compass project and reproduce the issue with as little code as possible. Ideally, this should be a single SASS file and Compass' config.rb. Then share every file from this new project, not just extracts. You can use https://gist.github.com/ to conveniently publish larger files.

And you should compile with the compass command line tool, not CodeKit.

PS I'm developing an alternative to http://sassmeister.com that allows using multiple Compass extensions and also accepts HTML and renders the resulting page. But chances are that i'm not deploying it in next 14 days yet. :(

[jcampbell05]

Okay Mines Mac OS X 10.7, Compass 0.12.2.

I'm not sure how to get it to print out the stack, I'm fairly new to Compass.

I don't mind giving you my whole project file, as its going to be open source. It basically an attempt to try and combine the best of all the mixins, smaller sass solutions and other good bits from other Frameworks into one Framework which is designed to be modular so in theory you can change bits out if you think I don't know what I'm talking about :)

I'm starting with a basic bunch of SASS files for now but maybe in the future, it can be expanded to have extra features when installed as a gem etc.

But I'll do the blank project thing.

[lolmaus]

Okay, if you're going to share the whole project, please publish it on GitHub. I'll download it and see what's going on there.

But i think you're going in the wrong direction with your project. The matter is that the ecosystem of Compass extensions is already modular.

One can use the Gemfile to list which extensions are required for the project and have them all installed automatically with a single command.

There's also the templates feature of Compass. A Compasss extension can provide a template of a Compass project. Try executing:

compass create sgs-demos -r singularitygs --using singularitygs/demos

and a directory sgs-demos will appear that will contain a brand new Compass project structure with all the necessary files.

So instead of creating a one-project-to-rule-them-all, you should build a small extension that only provides the missing mixins and whatever you want and configure it to be able to set up a template of your liking with the compass create command.

Some links for you to study:

• https://github.com/Team-Sass/Singularity/wiki/Installation#installation
• http://compass-style.org/help/tutorials/extensions/
• http://gembundler.com/

[jcampbell05]

Okay I will do.

And thank you for the advice, I'll have a look :).

[lolmaus]

OK James, i'm waiting for you to publish your project with a Breakpoint Slicer problem and share a link here.

Андрей 'lolmaus' Михайлов

On Wed, May 22, 2013 at 4:04 PM, James Campbell notifications@github.comwrote:

Okay I will do.

And thank you for the advice, I'll have a look :).

— Reply to this email directly or view it on GitHubhttps://github.com/lolmaus/breakpoint-slicer/issues/4#issuecomment-18273687 .

[jcampbell05]

Okay, pushed a version up to https://github.com/NyxDigital/Nightinggale

[lolmaus]

I've cloned your project locally, ran compass clean and compass compile. The project compiled fine without any issues. Does it fail for you?

PS I've added another link to the list of articles you should read (above).

[jcampbell05]

It fails for me for some reason, whats your version of compass / sass ?

I'll try the empty project idea :) and thank you for your help, appreciate it :)

[lolmaus]

I use the latest releases:

• compass (0.13.alpha.4)
• sass (3.2.9)

Are you using compass compile or CodeKit to compile?

[jcampbell05]

I've used both and it fails on both. My Compass version is older than yours, not sure about my Sass version (Does sass version work ? )

[lolmaus]

Compass actually uses SASS to compile.

Please run gem update to update your gems to the latest version and then run compass clean && compass compile.

[jcampbell05]

Works now thank you :) I think my SASS was out of date, I'll try telling code kit to use the system compiler :) just to see

[lolmaus]

Gah!

[jcampbell05]

Oh wait, I compiled the wrong folder. It still dosn't work :/

[lolmaus]

Please use [Bundler(http://gembundler.com/) for your project. Check in the Gemfile and Gemfile.lock files. This will let us have identical environments and hopefully will either let me reproduce the problem or resolve the problem for you.

[jcampbell05]

I've downloaded it but I am unsure of how to set it up.

[lolmaus]

Then study it, man!

It absolutely pointless to release a SASS framework without understanding Bundler (but i should say chances are that if you study Bundler, you'll understand that your idea of one-framework-to-rule-them-all was pointless in the first place).

Look. I told you that i can't fix the issue until i reproduce it.

I've been working on my SASS playground project recently. It's not finished yet but good enough already for you to make use of it: SassBin.

You'll have to provide all the SASS code in one file, but other than that there are almost no restrictions. The list of supported Compass Extensions is identical to SassMeister's (click the «i» to see the list). The difference between SassMeister and SassBin is that you can use multiple Compass extensions at once (by importing them) and you can also post HTML code and see CSS applied to it.

So please try to reproduce your bug on SassBin. If you succeed, save and and share the link here. Please keep code as short as necessary for the bug to appear, don't post all your Nightinggale.

I'm closing this issue for now. I'll reopen it when you provide reproducible stuff.

PS If you find any errors in SassBin (it's probably very buggy) or would like to see more Compass extensions supported, please file an issue here.