Sass – media queries

zastosowanie mixinów w media queries:

$content-width: 960px

$screen-xs: 480px
$screen-sm: 768px
$screen-md: 992px
$screen-lg: 1200px  

@mixin tiny-screens()
  @media only screen and (max-width: $screen-xs)
    @content

@mixin small-screens()
  @media only screen and (max-width: $screen-sm)
    @content

@mixin medium-screens()
  @media only screen and (max-width: $screen-md)
    @content

@mixin large-screens()
  @media only screen and (max-width: $screen-lg)
    @content

#main
  width: $content-width
  @include medium-screens
    width: auto
    max-width: $content-width
  margin-left: auto
  margin-righ 

css:

#main {
  width:960px;
  margin-left:auto;
  margin-right:auto
}
@media only screen and (max-width: 992px) {
  #main {
    width:auto;
    max-width:960px
  }
}

lub z wykorzystaniem warunków:

sass:

@mixin respond($breakpoint)
  @if $breakpoint == Phone
    @media screen and (max-width: 600px)
      @content

  @if $breakpoint == Tablet-port
    @media screen and (max-width: 900px)
      @content

  @if $breakpoint == Tablet-land
    @media screen and (max-width: 1200px)
      @content

  @if $breakpoint == Big-desktop
    @media screen and (min-width: 1800px)
      @content

html
  font-size: 62.5%
  +respond(Phone)
    font-size: 50%

@media (hover: none)

dla urządzeń dotykowych:

@media only screen and (max-width: $screen-md), only screen and (hover: none)

–