hi i want to create a 16 grid column for my new subtheme. i tried this:

$grids: 16;
$gutters: 1/3;

and checked my grid with

@include sgs-change('debug', true);

body{
  @include background-grid($color: orange);
}

but it has still 12 colums. Then i checked my singularity version with "gem list" and i saw its version 1.4.0 so i tried this code from singularity wiki :

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

My grid has 16 colums now but i get an error while compiling sass in my theme.normalize.css file:

/*
Error: Undefined mixin 'add-grid'.
on line 1 of C:\xampp\htdocs\mya\sites\all\themes\mya\sass\variables\_grid.scss, in `add-grid'
from line 1 of C:\xampp\htdocs\mya\sites\all\themes\mya\sass\variables\_grid.scss
from line 2 of C:/xampp/htdocs/mya/sites/all/themes/mya/sass/mya.normalize.scss
from line 2 of C:/xampp/htdocs/mya/sites/all/themes/mya/sass/mya.normalize.scss

1: // Import the legacy variables (relevant for controlling compass-normalize).
2: @import "variables/**\/*";
3:
4: // Generate normalize.css.
5: @import "normalize";
6:

Any help how to get rid of this error? Thanks :-)

Comments

Fulgrim’s picture

ok i fixed the generated error by adding @import "singularitygs"; to my _grid.scss

BeachsidePaul’s picture

I am getting the same error Fulgrim. You're right, adding the @import of singularity and breakpoint to my _grid.scss file does stop the error but I can't understand why we are getting the error in the first place. I am importing both these libraries in my "master" scss file before importing my variables/_grid.scss, I shouldn't have to remport them in the partials should I? Thanks Paul

pkiff’s picture

Have you added the required extensions to the top of your theme.layout.scss file inside your layouts folder? That seems to be the recommended approach, and I think that should work. If you look at the sample Omega themes, you can see that's where they load those extensions. Just having the extensions listed in your config.rb file (is that what you mean by "master" scss file?) is apparently not enough.

Also, I don't think you can use the "add-grid" or "add-gutter" functions in the various _grid.scss files (you may have several _grid.scss files - for e.g., one in an abstractions folder and another in a base folder) unless you have first loaded the extensions. If you stick to just including variables in those, then you won't get an error because you can set variables for breakpoint before you actually load breakpoint, but you can't use the breakpoint functions without loading breakpoint.

I think you are supposed to add grids in your theme.layout.scss file in your layout folder, where the appropriate extensions are loaded. I actually set the $grid variables in that file as well, and that works and it makes it easier to keep track of the variables while editing the grids in the layout file.

I'm not sure why this is so, and perhaps it reflects a bug, or perhaps my understanding of the correct locations for different codes is wrong, but that is what works for me currently.

minneapolisdan’s picture

I would love some clarity here as well. I am making the switch to Singularity 1.4, and wanted to write in new syntax. But I'm getting the same errors of Undefined mixin 'add-grid'.)

Why can I use this in my _grid.scss file:

// Singularity 1.0 Syntax
$grids: 4;

But not this?

// Singularity 1.2 Syntax
// @include add-grid(4);

I know I have the right version of Singularity installed. I shouldn't have to add @import "singularitygs"; to my _grid.scss, should I? It doesn't make sense to me. I'm following the same file structure as Omega, and running @import "singularitygs" from my xxx.styles.scss, followed by an import to my variables folder.

fubhy’s picture

Category: Bug report » Support request
Status: Active » Fixed

Once @import "singularitygs" is in one of your stylesheets (optimally styles.scss) then it will be available in all partials imported after that. So no need to import it again in _grid.scss (assuming that it is loaded after that). How did you install the new singularity gem? Just running "gem install ..." is not going to add it to your bundle. We are using "bundle exec ..." to run e.g. guard through the Bundler pipe which ensures that the right versions of the Gems (as specified by the Gemfile.lock) are being used e.g. in Guard. E.g. if you just use "guard" without running it through bundler it would just pick whatever latest version of each Gem it can find. So there's two things you have to do to ensure that Singularity 1.4 is actually being used by Guard:

Install singularity 1.4 by updating your Gemfile and then running bundle update. You can check which versions of each gem are used by your bundle by running "bundle list".

Now, in order to e.g. run Guard make sure you use "bundle exec guard" and not just plain "guard".

If that still doesn't work then there's something wrong with the Gem itself or the syntax you are using is not right. Are you sure that the 1.2 syntax of singularity is still valid for 1.4? Your best bet would be to check out the SingularityGS repository on GIthub and look at the 1.4 tag specially and ensure that the mixins, etc. included in there are the ones you are trying to use.

I remember that the documentation on the repository was not up to date with the latest version of Singularity. So don't trust the documentation and the syntax shown there blindly. It might've changed.

Hence, if you might even want to downgrade to an earlier singularity version if you want to follow the syntax shown in the docs. I don't have time right now to acutally check out the repository myself, sorry!

minneapolisdan’s picture

Thanks fubhy!

I messed around with different versions of Singularity (1.2, 1.4) and if an issue lies there, I will find it. One quick observation with Omega 4, however.

1. Using Singularity 1.4 and Omega 4, I get this error for my normalize.scss file:

omega.normalize.scss (Line 25 of sass/variables/_grid.scss: Undefined mixin 'add-grid'.

my omega.styles file is fine

2. The normalize.scss file in Omega 4 calls all _variable files by default, and that includes my _grid.scss file.

// Import the legacy variables (relevant for controlling compass-normalize).
@import "variables/**/*";

3. Since my _grid.scss file includes Singularity 1.4 mixins (@include add-grid), normalize.scss doesn't know what to do with them. Hence the error. Right?

4. Should I then include external libraries to my normalize.scss file?

// Import external libraries.
@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "toolkit";

5. If #4 is true, then it should've broke before, when using Singularity 1.1. But it didn't. So I'm confused.

Again, any insight here is helpful, I understand it's not specifically an Omega issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

asghaier’s picture

Thank you guys,

I have the same error as #6

And I am using the following :
omega 7.x-4.3
singularitygs (1.4.0)

I had to add to my _grid.scss the following line :
@import "singularitygs";
Eventhough it is already imported in mytheme.styles.scss file. But still this trick magically fixed the error.

I suspect that this is not a clean workaround and that it might be a bug that should be fixed.

vagelis-prokopiou’s picture

I had the same problem. The following code in my _grid.scss worked:

@import "singularitygs";

@include add-grid(5);
@include add-gutter(1/4);
Geijutsuka’s picture

Had the same problem and changing my syntax from

$grids: 16;
$gutters: 1/4;

to

@import "singularitygs";
@include add-grid(16);
@include add-gutter(1/4);

definitely did the trick (as mentioned in #9).

I've been following tutorials at Level Up Tuts and the old syntax was used, so anyone following along with those beware (but otherwise the tutorials have been great). Strangely enough though, the 12 grid and 1/4 gutter (used in the video) was working just fine with the old syntax.

On another note, also mentioned in the tutorials are

$tab-port: 46.25em;
$tab-land: 58.75em;
$desk: 76.25em;

Has the syntax for defining these breakpoints changed as well?

vagelis-prokopiou’s picture

Hello Geijutsuka.
The code you refer to,

$tab-port: 46.25em;
$tab-land: 58.75em;
$desk: 76.25em;

are just variables. You can name them whatever you want. It is up you you. It is not syngularitygs syntax per se.

Geijutsuka’s picture

Thanks, Vagelis.
Glad to hear the syntax for defining variables hasn't changed. :)