CODEWITHSUNDEEP
cssmedia-queriessass
Rick Donohoe
Rick Donohoe

Reputation: 7271

Media Queries with SCSS not applying

I'm trying to test the following code out in Chrome and Firefox and neither is picking it up. I have added it to the end of my stylesheet which works fine anyway.

@media all and (max-width : 850px) {
  h1#site-name {
    width: 100%;
    a {
      margin: auto;  
    }
  }

  nav#main-menu {
    float: left;
  }
}

I am re-sizing my browser window and the changes are obviously not taking effect at any width. The code is within a .scss file for reference.

Any ideas?

Upvotes: 0

Views: 274

Answers (1)

ferne97
ferne97

Reputation: 1073

You can use mixins for media queries in scss too.

@mixin mq($mq) {
    @if $mq == medium {
        @media (max-width: 850px) { @content; }
    }
}

#main-menu {
    // default styles

    // media query 850px max-width
    @include mq(medium) {
        float: left;
    }
}

Check out this article for more info.. http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Upvotes: 1

Related Questions