やりたいこと
レスポンシブ対応をするにあたって、めっちゃ大量の要素の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);
}
できたもの
-
動画
