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 over 2 years 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 over 2 years ago

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

Bryan 13 days ago

Sorry, Rafi — I know this thread is way stale, but I'm getting a Sass error related to breakpoints — just like YH was getting, when using the "only" modifier:

 

.donate__header {
  border-top: 36px solid $color-beige;

  .heading-wrapper {
    padding: 0 55px;
  }

  h1,
  h2 {
    font-family: "Montserrat", sans-serif;
  }

  h1 {
    margin-bottom: 0;
    font-size: 3.375rem;
    font-weight: 700;
    line-height: 4rem;
    color: $color-dark-green;
  }

  h2 {
    margin-top: 0;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: $color-green;
  }

  #logo {
    margin: 24px 0 36px;

    img {
      width: 120px;
    }
  }

  & ~ .content-wrapper .main-content {
    @include breakpoint(small only) {
      padding: 30px;
      background-color: gray;
    }
  }
}

 

The problem's at the very bottom. If I set the breakpoint to "small," it works just fine. But if I use "small only," I get this error:

 

WARNING: Breakpoint mixin supports: medium, large, xlarge, xxlarge

         on line 114 of sass/base/_mixins.scss, in mixin 'breakpoint'

         from line 37 of sass/pages/_donate.scss

         from line 72 of sass/style.scss

 

Can't see that I'm doing anything wrong here, but something's certainly not right. Any ideas?

 

Thanks very much!