SCSS로 더 쉽고 스타일링

SCSS에 을 사용하면 클래스를 정의할 수 있습니다.

@mixin 정의

@mixin themable($theme-name,container-bg,$left-bg,$right-bg,$innertext,$button-bg){
    .#{$theme-name}{
        .container{
            background-color:$container-bg;
            border:1px solid #000;
            display:flex;
            justify-content:space-between;
            margin:0 auto;
            width:50%;
        }

        *{
            color:$innertext;
            font-size:1rem;
        }

        .left {
            background-color: $left-bg;
            height: 100%;
            width: 69%;
        }

        .right {
            background-color: $right-bg;
            height: 100%;
            position: relative;
            width: 29%;
        }

        .button {
            background-color: $button-bg;
            border: 0;
            border-radius: 10px;
            bottom: 10px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            padding: 1em 2em;
            position: absolute;
            right: 10px;
        }

        input{
            outline:none;
            background:none;
            border:none;
            border-bottom:1px solid white;
            box-shadow:none;
        }
    }
}

이제 themable이라는 클래스를 정의할 수 있었습니다.

그럼, 로 실제로 themable 를 정의해 보겠습니다.

@include로 mixin 상속

@include themable(dark-theme,#898989,#454545,#252525,#ffffff,#e5e5e5);
@include themable(light-theme,#ffffff,#ffa3a3,#ffa3d1,#000000,#ffd1a3);

dark-theme

<body class="dark-theme">
  <div class="container ">
    <div class="left d-flex justify-content-center align-items-center">
      <span>LEFT</span>
    </div>
    <div class="right d-flex flex-column justify-content-center ">
      <span class="align-self-center">RIGHT</span>
      <button class="button">BUTTON</button>
    </div>
  </div>
</body>

light-theme

<body class="light-theme">
  <div class="container ">
    <div class="left d-flex justify-content-center align-items-center">
      <span>LEFT</span>
    </div>
    <div class="right d-flex flex-column justify-content-center ">
      <span class="align-self-center">RIGHT</span>
      <button class="button">BUTTON</button>
    </div>
  </div>
</body>

dark-theme과 light-theme로 선언하기만 하면 쉽고 스타일링할 수 있습니다.

이것에 의해 디사인 트렌드의 다크 모드도 간편하게 구현할 수 있습니다.
여러분도 꼭 일상적인 프런트 설계나 코딩 중에 SCSS(또는 SASS)를 사용해 보세요!

Reference

이 문제에 관하여(SCSS로 더 쉽고 스타일링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/brain_fcy/items/7cd951d7c2fd1e3ac0de

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

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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