I having some troubles with the new way omega works.

after saving my disofo.style.scss file i getting a error like this:

WARNING: In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of `$breakpoint-no-queries: {{setting}}` to `@include breakpoint-set('no queries', {{setting}})`. Variable settings, as well as this warning will be deprecated in a future release.
on line 16 of node_modules/breakpoint-sass/stylesheets/breakpoint/_legacy-settings.scss
from line 41 of node_modules/breakpoint-sass/stylesheets/_breakpoint.scss
from line 192 of sass/disofo.styles.scss

my disofo.style.scss looks like this:

@import "compass";
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";

@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";
@import "variables/_grid.scss";

body{
	background-image: url('localhost/disofo/sites/all/themes/disofo/images/wallpaper.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center; 
	background-size: 100%;
}
a{
	color: #000;
}

.l-page{
	margin: 0 auto;
	@include breakpoint($tab, true){
		width: $tab;
	}
	@include breakpoint($desk, true){
		width: $desk;
	}
}

.l-constrained {
  width: 95%;
  margin: 0 auto;
  @include pie-clearfix;
}

/* Header */
.l-region--header {
  padding: $vert-spacing-unit 0;

  .block {
    float: right;
  }
}


.l-branding img{
  margin-left: 75px;
  width: 100px;
  height: auto;
  text-align: center;
}

.site-name{
  margin-top:2%;
}

.site-name a{
  font-family:'copper';
  font-size: 1.8em;
  }

/* Content Area */
.l-highlighted-wrapper {
  padding: $vert-spacing-unit 0;
}
.l-region--highlighted {
  @extend .l-constrained;
}
.l-region--help {
  margin-bottom: $vert-spacing-unit;
}
.l-main {
  margin-top: 2 * $vert-spacing-unit;
  margin-bottom: 2 * $vert-spacing-unit;
}
.l-main h1{
  font-size: 1.8rem;
}

/* Sidebars */
.l-region--sidebar-first,
.l-region--sidebar-second {
  padding: $vert-spacing-unit $horz-spacing-unit;
}

/* Footer */
.l-footer-wrapper {
  padding: $vert-spacing-unit 0;
}
.l-region--footer {
  @extend .l-constrained;
}

@include breakpoint($tab, true) {
  .l-constrained {
    width: 90%;
  }

  /* Header */
  .l-branding .site-name {
    @include grid-span(4, 1);
  }
  .l-branding img{
    margin-left:0;
  }
 // .site-name {
  //  @include grid-span(8, 5);
 // }
  .l-region--header {
    @include grid-span(8, 5);
  }
  .site-name{
  margin-top:4%;
}

.site-name a{
  font-family:'copper';
  font-size: 2.8em;
  }

  /* Sidebars */
  .has-two-sidebars,
  .has-one-sidebar {
    .l-content {
      @include grid-span(8, 5);
    }
    .l-region--sidebar-first,
    .l-region--sidebar-second {
      @include grid-span(3, 1);
      clear: right;
    }
  }
}

@include breakpoint($desk, true) {
  .l-constrained {
    width: 80%;
  }
  /* Header */

  .l-branding img{
    margin-left:0;
  width: 150px;
  height: auto;
}
  .site-name{
  margin-top:4%;
}

.site-name a{
  font-family:'copper';
  font-size: 3.8em;
  }

  /* Sidebars */
  .has-one-sidebar {
    .l-content {
      @include grid-span(8, 5);
    }
    .l-region--sidebar-first {
      @include grid-span(3, 1);
      clear: none;
    }
  }
  .has-two-sidebars {
    .l-content {
      @include grid-span(6, 1);
    }
    .l-region--sidebar-first,
    .l-region--sidebar-second {
      @include grid-span(3, 1);
      clear: none;
    }
    .l-region--sidebar-second {
      @include grid-span(3, 10);
    }
  }
}

// Sticky footer

@include breakpoint($tab){
  HTML, BODY {
    height: 100%;
  }
  .l-page {
    min-height: 100%;
    position: relative;
  }
  .l-main {
      padding-bottom: 3em;/* same as .l-footer height */
  }

  .l-footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 3em;/* same as .l-main padding-bottom */
  }
}

and my _gris.scss looks like this:

@import "singularitygs";

// Set consistent vertical and horizontal spacing units.
$vert-spacing-unit: 18px;
$horz-spacing-unit: 1em;

$tab: 44em;
$desk: 70em;

@include add-grid(12);
@include add-gutter(1/3);

i'm aware that the code could be cleaner or more effective, but i'm new on all this.

the strange thing is i had this before but solved it somehow, now on my new site i getting the error again, i copied most files from my site with no errors, but somehow the error keeps pupping up in gulp after saving the style.scss (or any other file)

hope somebody could help me on this, i tried google but got no results

Comments

Staler75 created an issue.

Staler75’s picture

update: when i chanse the @import path like this:

@import "compass";
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";

@import "variables/**/*.scss";
@import "abstractions/**/*.scss";
@import "base/**/*.scss";
@import "components/**/*.scss";
//@import "./variables/_grid.scss";

i getting this error:

[03:27:08] Starting 'sass'...
[03:27:08] Finished 'sass' after 14 ms
Error in plugin 'sass'
Message:
sass/disofo.styles.scss
Error: Undefined variable: "$tab".
on line 32 of sass/disofo.styles.scss
>> @include breakpoint($tab, true){
---------------------^

so i think my first setting was oke, but i keep getting those errors, really like to start on the project but can't trough this error.

really hope there is some one who can help me on this, because i don't know what is going wrong and how to solve it

e.ryan.schmidt@gmail.com’s picture

I'm a little late to the party, but is this error preventing your styles from compiling? I'm getting the same error; however, the styles still compile just fine for me. I tried to get rid of the error by doing what the error says--changing instances of $breakpoint-no-queries: {{setting}}` to `@include breakpoint-set('no queries', {{setting}}); however, I then get a different error telling me 'breakpoint-set' is not recognized.

It's definitely annoying, but doesn't seem to really effect anything other than cluttering up the terminal everytime I compile. If I figure out a fix I'll let you know!

e.ryan.schmidt@gmail.com’s picture

Ok, I think I've rectified this, and everything seems to be working properly. I'm assuming your Omega subtheme is set up similarly to mine--if so, you need to change every instance of $breakpoint-no-queries: {{setting}} to @include breakpoint-set('no queries', {{setting}}), which should be found in {{yourtheme}}.no-query.scss file (or files, if you're using multiple layouts).

This is not enough, though. For some reason you need to add @import "breakpoint"; at the top as well, otherwise the @include will not be recognized. Hope this helps you or anyone else that may be running into this error!

Barry_Fisher’s picture

Thanks @afireintheattic. I can verify #4 fixed my issue where the breakpoint-set mixin couldn't be found as displayed in the error message.

If this is useful to anyone else, here is what my THEMENAME.no-query.scss file looked like previously:

$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: true;

...

Whereas now...

@import "breakpoint";

@include breakpoint-set('no query fallbacks', true);
@include breakpoint-set('no queries', true);

...

One minor issue is that my IDE (PhpStorm) can't resolve the location of the breakpoint library, so the first import line shows underlined in red. Not a dealbreaker, as the sass compiles nicely now.

I'll leave the issue open as this is a support request from @Staler75. Please close if you're happy this is now resolved.

calebyoder’s picture

Thanks!