====@media====


<sxh scss; title: index.scss>
.col{
  @media only screen and (min-width: 960px){
    width:25%;
    float:left;
  }

  @media only screen and (min-width: 720px) and (max-width: 959px){
    width:50%;
    float:left;
  }
}
</sxh>

<sxh css; title: index.css>
@media only screen and (min-width: 960px) {
  .col {
    width: 25%;
    float: left; } }

@media only screen and (min-width: 720px) and (max-width: 959px) {
  .col {
    width: 50%;
    float: left; } }
</sxh>

====@media с мексинами====
<sxh scss; title: _minixs.scss>
@mixin large-screen($min, $max){
  @media only screen and (min-width: $min) and (max-width: $max){
    float:left;
    @content;
  }
}
</sxh>

<sxh scss; title: index.scss>
@import "partial/_minixs";

.col{
  @include large-screen(960px,1600px){
    width:25%;
  }
  @include large-screen(720px,960px){
    width:50%;
  }
}
</sxh>


<sxh css; title: index.css>
@media only screen and (min-width: 960px) and (max-width: 1600px) {
  .col {
    float: left;
    width: 25%; } }

@media only screen and (min-width: 720px) and (max-width: 960px) {
  .col {
    float: left;
    width: 50%; } }
</sxh>