SASS 믹스인을 사용하여 미디어 쿼리를 작성하기 쉬움

안녕 모두들! 👋 드디어 용기와 용기를 내 첫 블로그 게시물을 작성하고 게시했습니다. 어쨌든, 나는 여기서 소개하는 모든 것을 무시하고 있습니다. 내 프로필에서 항상 사용할 수 있기 때문입니다. 당신은 나를 때리는 것을 환영합니다. 🤙

🚩 소개

그래서 당신은 웹 개발자입니다. 👩‍💻 그렇다면 미디어 쿼리를 작성하는 것이 겁날 수 있다는 것을 이미 알고 계실 것입니다. 특히 큰 프로젝트가 있고 많은 중단점이 있을 때 그렇습니다. 저를 믿으세요. 당신이 어떻게 느끼는지 압니다. 그렇기 때문에 언제 어디서나 필요할 때 확실하고 신뢰할 수 있는 작성 방법이 필요합니다.

👀 우리에게 필요한 것은?

안심하다. 이것은 로켓 과학이 아닙니다. 놀라운 SASS(scss) 구문이 제공하는 멋진 믹스인과 일부 제어 지시문만 사용할 것입니다.

🤷‍♂️ 저는 이 모든 것이 처음입니다.

완전 멋지네요 🤙 저도 몇 달 전에 그랬어요. 당신이 알아야 할 모든 것은 css를 작성하는 방법입니다. 왜냐하면 그것이 우리가 할 일이기 때문입니다. 따라서 앞서 언급한 Sass는 CSS에 불과하지만 몇 가지 강력한 기능이 있습니다. CSS 내에서 변수, 중첩 규칙 또는 함수를 사용할 수 있는지 궁금한 적이 있습니까? 이것이 sass로 할 수 있는 일입니다. 가장 좋은 점은 SASS 문서를 사용하여 무료로 SASS를 시작할 수 있다는 것입니다. 👇

SASS Docs

💻 시작하기

잡담은 그만하고 재미를 시작합시다. 시간을 절약하기 위해 미디어 쿼리를 작성하는 방법을 변환하는 방법을 보여 드리겠습니다. 프로젝트에 바로 포함시킬 수 있습니다. 나는 당신이 프로젝트에서 이미 sass/scss를 사용하고 있으며 이러한 것들을 설정하는 방법에 익숙하다고 가정합니다. 이제 갈 준비가 되었습니다.

뷰포트, 중단점 및 기발한 scss와 같은 미디어 쿼리에 필요한 모든 뉘앙스를 넣을 _mixins.scss 파일을 생성하여 시작하겠습니다.

    // respond is the name of your mixin

    @mixin respond ($breakpoint) {

        // $breakpoint is simply a variable that can have several values

        @if $breakpoint==tablet {

            // here `laptop` is the value of $breakpoint
            // when call laptop, we mean the following piece of code        

        @media only screen and (max-width: 600px) {
          @content;
        }
      }

      @if $breakpoint==mobile {
        @media only screen and (max-width: 480px) {
          @content;
        }
      }
    }

이제 _layouts.scss 클래스의 스타일을 지정하는 .main 파일에서 이러한 미디어 쿼리를 사용할 것입니다.

    .main {
        background: red;
      // normal styling code here

      @include respond(tablet) {
            background: green;
            // responsive code for tablet viewport i.e. 600px
        }

      @include respond(mobile) {
            background: blue;
            // responsive code for mobile viewport i.e. 480px   
        }
    }

그리고 그것은 포장입니다. 🎉 더 안정적인 미디어 쿼리를 작성하고 나중에 이 코드가 sass 컴파일러를 통과하여 다음 코드를 생성하기 위해 필요한 모든 작업입니다. 👇

    .main {
        background: red;

        @media only screen and (max-width: 600px) {
            background: green;
        }

        @media only screen and (max-width: 480px) {
            background: blue;
        }
    }

🙇‍♂️ 결론

이제 신뢰할 수 있는 CSS 미디어 쿼리 작성의 마스터입니다. 🤩 최대로 사용하면 시간을 많이 절약할 수 있으며 의심할 여지 없이 코드를 유지 관리하는 데 덜 혼란스러운 방법을 제공할 것입니다. 이제 이 초강력을 사용하여 멋진 것을 만들 차례입니다.

아래 게시물에 대해 마음에 드는 점/싫은 점을 알려주세요. 👇