CODEWITHSUNDEEP
csssass
August
August

Reputation: 1819

Placement of media queries inside Sass/Scss

I am currently working to make my website responsive. As I have to use media queries, I wonder which of these approaches are more common in the industry or which one would be better, easier to read/maintain in SCSS (the CSS values inside is just for demonstration).

Example 1 :

.foo {
  width : 10px;
  .bar {
    width : 20px;
  }
}

@media screen and (max-width : 20px) {
    .foo {
    width : 20px;
    .bar {
      width : 30px;
    }
  }
}

Example 2 :

.foo {
  width : 10px;
   @media screen and (max-width : 20px) {
      width : 20px;
   }
  .bar {
    width : 20px;
    @media screen and (max-width : 20px) {
      width : 30px;
   }
  }
}

Example 3 :

.foo {
  width : 10px;
   @media screen and (max-width : 20px) {
      width : 20px;
      .bar {
        width : 30px;
      }
   }
  .bar {
    width : 20px;
  }
}

I know that I could use mixins and functions instead of writing down the whole media query, I am more interested in placement of them.

Upvotes: 1

Views: 1844

Answers (2)

prajeesh webandcrafts
prajeesh webandcrafts

Reputation: 39

@mixin min-max($resMin, $resMax) {
    @media (min-width: $resMin+px) and (max-width: $resMax+px) {
      @content;
    }
  }
  @mixin max($res) {
    @media (max-width: $res+px) {
      @content;
    }

  }
  @mixin min($res) {
    @media (min-width: $res+px) {
      @content;
    }
  }



.class-name {
    @include min(1200){
      width: 25%;
    }
   @include min-max(992,1199){
     width: 50%;
   }

    @include max(991){
      width: 100%;
    }
}

Upvotes: 0

yogesh rathod
yogesh rathod

Reputation: 310

A better option would be to create sass mixin for media query and use it 
e.g.
bp = Break point
@mixin bp-devices {
    @media (min-width: 767px) {
        @content;
    }
}

and use it as
footer {
    padding: 25px 0 14px;

    @include bp-devices { padding-bottom: 45px; }
}

Upvotes: 3

Related Questions