Menu icon Foundation
Sass Breakpoint Mixin

Why is @include breakpoint(small only) {} not working? I dont get how the Sass Mixins should work correctly.

Says it should be like:

.element {

// Only affects medium screens and smaller

@include breakpoint(medium down) { }

// Only affects medium screens, not small or large

@include breakpoint(medium only) { }

}

 

Example:

.scroll-down-btn {

position: absolute;

height: auto;

width: 90px;

margin: 0 auto;

text-align: center;

@include breakpoint(small only) {

display: none;

}

 

But hides it for all sizes 

Sassbreakpointsmixinsfoundation 6

Why is @include breakpoint(small only) {} not working? I dont get how the Sass Mixins should work correctly.

Says it should be like:

.element {

// Only affects medium screens and smaller

@include breakpoint(medium down) { }

// Only affects medium screens, not small or large

@include breakpoint(medium only) { }

}

 

Example:

.scroll-down-btn {

position: absolute;

height: auto;

width: 90px;

margin: 0 auto;

text-align: center;

@include breakpoint(small only) {

display: none;

}

 

But hides it for all sizes 

Rafi Benkual 8 months ago

It might be related to some CSS rule outside of this example. Other than a missing bracket, it looks like the usage is correct here. Make sure you have no Sass errors in the terminal.

YH 8 months ago

Yeah had an error in terminal, fixed it and now it works great, really like this feature!
Thanks,