SASS 믹스인으로 쉽게 테마를 지정할 수 있습니다.

10014 단어 productivityreactsasscss

While building a dark theme for my React App, I've found myself escaping the nesting a lot in order to make styles for the dark theme .
Then, this mixin was born.



코드를 보여주세요!




@mixin atDarkTheme {
    $selector: #{&};
    @at-root body.dark-theme #{$selector} {
        @content
    }
}

이것은 React뿐만 아니라 Sass를 사용하는 모든 종류의 프로젝트에서 작동한다는 점을 언급할 가치가 있습니다.
그리고 스타일이 지정된 구성 요소가 테마 지정도 쉽게 처리할 수 있지만 저는 Scss의 팬이며 자체 Scss 파일로 내 구성 요소의 스타일을 지정합니다.

고장



다크 모드가 활성화되면 <body>는 dark-theme 클래스를 수신합니다. 따라서 body.dark-theme 선택자를 앞에 추가하기 위해 mixin은 다음과 같이 작동합니다.

  • $selector: & (parent selector) 및 #{} 를 사용하여 현재 선택자를 구문 분석한 다음 나중에 사용하기 위해 저장합니다.

  • @at-root: 다음 선택기를 문서의 루트로 이동하여 현재 중첩을 이스케이프합니다.

  • body.dark-theme: 다크 모드 스타일을 담당할 클래스입니다.

  • #{selector}: 이전 선택자를 다시 추가합니다.

  • @content: {}에서 대괄호@include 사이에 추가하는 모든 내용이 여기에 포함됩니다.




    • 용법



    .just-a-box {
    background: white; // ☀
    color: black; // ☀
    width: 100px;
    height: 100px;
    // Dark Theme styles
    @include atDarkTheme {
        background: black; // 🌙
        color: white; // 🌙
    }
}

    이 코드를 CSS로 컴파일하면 다음과 같이 표시됩니다.

    .just-a-box {
    background: white;
    color: black;
    width: 100px;
    height: 100px;
}
body.dark-theme .just-a-box {
    background: black;
    color: white;
}

    🧬믹싱의 진화: 다양한 테마



    다크 모드를 준수하는 이유는 하나의 믹스인으로 테마를 만들어 모두 지배하자!

    @mixin atTheme($theme: "default") {
    $selector: #{&};
    @at-root body.#{$theme}-theme #{$selector} {
        @content
    }
}

    용법



    이제 믹스인에 인수를 전달하여 생성한 테마에 동적으로 스타일을 추가할 수 있습니다.

    .amazing-navbar {
    background: white;
    color: black;
    width: 100%;
    height: 52px;
    // Theme styles
    @include atTheme("red") {
        background: red; // 🟥
    }
    @include atTheme("green") {
        background: green; // 🟩
    }
    @include atTheme("blue") {
        background: blue; // 🟦
    }
    @include atTheme("halloween") {
        background: purple; // 👻
    }
}

    이 코드를 CSS로 컴파일하면 다음과 같이 표시됩니다.

    .amazing-navbar {
    background: white;
    color: black;
    width: 100%;
    height: 52px;
}

body.red-theme .amazing-navbar {
    background: red;
}

body.blue-theme .amazing-navbar {
    background: blue;
}

body.green-theme .amazing-navbar {
    background: green;
}

body.halloween-theme .amazing-navbar {
    background: purple;
}

    💡몇 가지 더 많은 아이디어



    게시물을 간단하게 유지하기 위해 프로젝트에서 개선할 수 있는 부분에 대한 몇 가지 힌트를 제공합니다.
  • CSS 변수
  • atTheme 믹스인에 전달된 인수가 유효한지 확인하기 위해 미리 정의된 $themes 변수.
  • 반전 필터를 사용한 "자동"어두운 테마.

    • 결론



    믹스인에서 @at-root 지시문을 사용하면 시간을 많이 절약할 수 있으며 CSS의 강력한 특수성에만 의존하여 작업 중인 요소에 대한 테마별 선택기를 매우 빠르게 만들 수 있습니다.

    이 게시물이 도움이 되었거나 개선할 수 있다고 생각한다면 댓글로 알려주세요!

    더 멋진 지식에 여전히 굶주려 있다면 Bulma 프레임워크에 대한 또 다른 게시물을 작성했습니다.


    Bulma의 멋진 SASS 스니펫 강조 표시

    Lucas G. Terracino ・ 10월 15일 '20 ・ 4 분 읽기

    #beginners #webdev #sass #css



    다음 시간까지 👋!
    interviewstreet-string similarity - 클래스 스트리밍 프로세스
    LeetCode -****Binary Tree Inorder Traversal 두 갈래 나무의 중서 범람

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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