Sass – 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
  }
}

#sass

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.