Setting a new grid breakpoint in scss

sage
1

I would normally set my new break points in the _variables.less file when we were using less. Now with scss I seem to be having a slight issue. Within _variables.scss I cannot seem to use the bootstrap breakpoint variables.

Here is my code:

$grid-float-breakpoint: $screen-lg;

And the compile error is:

 11:25  Undefined variable: "$screen-lg".
assets/styles/common/_variables.scss

Works fine if I enter in a pixel value directly but obviously I don’t want to do that.

What am I missing now? I’m working on my first project with the latest scss Sage and everything else is splendid.

2

In this particular case, I think the easiest thing to do would be to copy the screen sizes to your _variables.scss file and remove !default from each. Even if you keep them as the default, you will need them declared before using them again if it’s before the defaults are actually loaded.

I don’t know if this is the optimal way to handle it, I’ve just started using SASS again like everyone else. Seems like a quick and simple workaround though.