Sass for文で楽したい

前提

SassのSCSS記法を用いる。

前回の続き。https://qiita.com/mei0210/items/5fdeef361249aa3a2f9a

style.scss

    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }

max-width 1500pxまでメディアクエリで書いた。
max-width 2900pxまで同じように書いていきたい。
地道に書いていくのはつらいので...

for文で書く

style.scss

    @for $i from 0 through 10 {
      @media (max-width: $i * 200 + 900px) and (min-width: $i * 200 + 701px) {
        width: #{100% / ($i + 4)};
      }
    }

これだけ！

cssにコンパイル↓

style.css

@media (max-width: 900px) and (min-width: 701px) {
  .wrap .circle {
    width: 25%;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .wrap .circle {
    width: 20%;
  }
}

@media (max-width: 1300px) and (min-width: 1101px) {
  .wrap .circle {
    width: 16.66667%;
  }
}

@media (max-width: 1500px) and (min-width: 1301px) {
  .wrap .circle {
    width: 14.28571%;
  }
}

@media (max-width: 1700px) and (min-width: 1501px) {
  .wrap .circle {
    width: 12.5%;
  }
}

@media (max-width: 1900px) and (min-width: 1701px) {
  .wrap .circle {
    width: 11.11111%;
  }
}

@media (max-width: 2100px) and (min-width: 1901px) {
  .wrap .circle {
    width: 10%;
  }
}

@media (max-width: 2300px) and (min-width: 2101px) {
  .wrap .circle {
    width: 9.09091%;
  }
}

@media (max-width: 2500px) and (min-width: 2301px) {
  .wrap .circle {
    width: 8.33333%;
  }
}

@media (max-width: 2700px) and (min-width: 2501px) {
  .wrap .circle {
    width: 7.69231%;
  }
}

@media (max-width: 2900px) and (min-width: 2701px) {
  .wrap .circle {
    width: 7.14286%;
  }
}

for文とても便利。

参考