Add media query around .small breakpoint or add smaller breakpoint

Is there a way to add a media query around the .small breakpoint? I’m creating some custom utility classes using the $breakpoint-classes mixin but have to add !important for them to work.

When I change it to something besides 0, or add a breakpoint like tiny: 0, before small, I get a compilation error like:

Libsass: Error: Invalid null operation: "null div 2".
...

>>     $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;

   -------------^


@Warn on Line 78 of "node_modules/foundation-sites/scss/util/_unit.scss":
null was passed to rem-calc(), which is not a number.

Partial code of my utility class setup is:

$padding-sides-all: (p);
$padding-sides: (
    pt: top,
    pr: right,
    pb: bottom,
    pl: left
);
$padding-x: (px);
$padding-y: (py);
@each $size in $breakpoint-classes {
    @include breakpoint($size) {
        @for $i from 0 to $whitespace {
            @each $side, $sideFull in $padding-sides {
                .#{$size}-#{$side}#{$i} {
                    padding-#{$sideFull}: #{$i}rem;
                }
            }
            @each $side in $padding-sides-all {
                .#{$size}-#{$side}#{$i} {
                    padding: #{$i}rem;

                }
            }
etc...

Thanks for the help!

1 Like

The original order has to be kept. Custom breakpoints can be added after them. And you can use variables as aliases.

Ok, thanks for the fast reply, appreciate the input.

Also you should be able to use the breakpoint() mixin and others.
See https://get.foundation/sites/docs/media-queries.html#sass-reference