[SASS / SCSS] scssでメディアクエリを使って要素の大きさを動的に変えた

7543 ワード
Sass CSS CSS3 scss CSS テキストリンク

やりたいこと

レスポンシブ対応をするにあたって、めっちゃ大量の要素のheightやwidthを「後から」変更しなくてはならなくなった...

sample.html
<body class="sample">
  <div class="sample__item1">hi1</div>
  <div class="sample__item2">hi2</div>
  <div class="sample__item3">hi3</div>
  <!--
    省略
  --> 
</body>
sample.scss
.sample {
  &__item1 {
    height: 100px;
    width: 200px;
    background-color: skyblue;
  }
  &__item2 {
    height: 50px;
    width: 100px;    
    background-color: green;
  }
  &__item3 {
    height: 80px;
    width: 160px;   
    background-color: #d5d5d5
  }
}

やったこと

元々のスタイルを全てmixinに変更して、倍率を動的に渡すことにした

sample.scss
@mixin style($multiplier) {
  .sample {
    &__item1 {
      height: 100px * $multiplier;
      width: 200px * $multiplier;
      background-color: skyblue;
    }
    &__item2 {
      height: 50px * $multiplier;
      width: 100px * $multiplier;    
      background-color: green;
    }
    &__item3 {
      height: 80px * $multiplier;
      width: 160px * $multiplier;   
      background-color: #d5d5d5
    }
  }
}

  @media screen and (max-width: 374px) {
    @include style(0.65);
  }

  @media screen and (min-width: 375px) {
    @include style(0.8);
  }

  @media screen and (min-width: 376px) {
    @include style(1);
  }

  @media screen and (min-width: 700px) {
    @include style(1.5);
  }

  @media screen and (min-width: 1024px) {
    @include style(2);
  }

できたもの