[SASS/SCSS] scss에서 미디어 쿼리를 사용하여 요소의 크기를 동적으로 변경했습니다.

하고 싶은 일

반응형 대응을 하는데 있어서, 대량의 요소의 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);
  }

할 수있는 것

동영상

codepen
htps : // 코데펜. 이오 / 와타루 보루 / 펜 / 아 bv Lb

Reference

이 문제에 관하여([SASS/SCSS] scss에서 미디어 쿼리를 사용하여 요소의 크기를 동적으로 변경했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/vengavengavnega/items/8ffff076874d36d99471

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다