Breakpoints with multiple SCSS variables

[Frederic Champion]

Hello,

On Neat Version: 2.0.0 I didn't find anyway to use min-width AND max-width width SCSS variables.

I can write:

$my-neat-grid: (
	columns: 12,
	gutter: 30px,
	media: $tablet-breakpoint,
);

Which will produce a min-width breakpointed grid. (no way to specify a max-width instead)

But if I want to use a min and max width the only solution is to write:

$my-neat-grid: (
	columns: 12,
	gutter: 30px,
	media: "(min-width:300px) and (max-width: 700px)",
);

But there is now way to replace 300px and 700px by a SCSS variable such as $tablet-breakpoint $desktop-breakpoint

Am I wrong ?

[Will H McMahan]

You need to do Sass string interpolation. This way you are able to say "Hey Sass, I know I'm in a string right now but pull in the veritable here."

Based on what you have above this would probably look something like the following.

$small-screen: 300px;
$medium-screen: 700px;

$my-neat-grid: (
  columns: 12,
  gutter: 30px,
  media: "(min-width:#{$small-screen}) and (max-width: ${$medium-screen})",
);

[Will H McMahan]

Closing for now. Feel free to re-open if issue persists.

[Frederic Champion]

Thank you for the tips 👍