1. SCSS(SASS) 를 사용해보자! [사용방법]

기본적인 사용법에 대해 알아보자.

 

1. 글로벌 sass 의 적용

styles 폴더에, "global.scss" 를 만들고

직접 css 처럼 적용하여 사용하거나,

        body {
            color : red;
        }
        
혹은
        $custom : red;

        body {
            color : $custom
        }

처럼 사용할 수 있다.

후에, "_app.tsx" 에 가서

    import "../styles/globals.scss";

로 import 하여 사용한다.

 

2. 모듈 CSS 의 적용

 똑같이 .module.scss 로 만들어서 적용시킨다.

 

3. 중첩되게 사용

.NumberTest {
    font-size: 1rem;
    color: green;

    .NumberTest__title {
        color: red;
    }
}

==> ".NumberTest .NumberTest__title" 처럼 명명했던 것을, 중첩인자로 바꿀 수 있다.

 

4. 중첩자 규칙의 활용

<기존에 이렇게 썻던 것을>
    .alert ul, .alert p, .warning ul, .warning p {
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 0;
    }

<scss 에서는>
    .alert, .warning {
        ul, p {
            margin-right: 0;
            margin-left: 0;
            padding-bottom: 0;
        }
    }

 

5. 결합자와 사용

ul > {
    li {
        list-style-type: none;      // ul의 바로아래 li 에만 적용
    }
}

h2 {
    + p {
      border-top: 1px solid gray;   // h2 에 인접한, 단 하나의 p 에 대해서만 적용
    }
  }

p {
    ~ {
        span {
            opacity: 0.8;           // p 이후에 나오는 모든 "형제" span 에 대하여 적용
        }
    }
}

 

6. & 의 활용

& 를 사용하여, 상위 항목에 중첩된 이름을 사용할 수 있다.
물론, :hover, ::after 등도 사용할 수 있다.

하위 &__title 은
.NumberTest__title 이 된다.


    .NumberTest {
        font-size: 1rem;
        color: green;
    
        &__title {
        color: red;
        }

        &:hover{
            transform: rotate(10deg);
        }
    }

 

7. @mixin 과 @use, @include 의 활용

미리 정의해 놓은 값인 @mixin 을
@use 를 사용하여 가져올 수 있다.
후에, @include 를 사용해 그 값을 사용한다.

    < base.scss >
        $font-color-default: wheat;
        $font-color-title: green;
        $font-color-orange: orange;

        @mixin title {
            font-size: 1.5rem;
            color: $font-color-orange;
            border: 1px solid;
        }

    <component.scss>

        @use "../../styles/base.scss" as base;

        .NumberTest {
            font-size: 1rem;
            color: green;

            &__title {
                @include base.title;
            }
        }

진짜 중요한 유의사항

    * 이때, "base.scss" 의 안에는 "반드시 pure 코드만 들어가야 하는데"
    예를들어, body, html, p 등의 "클래스이름(id 이름)이 아닌 것들은 들어 갈 수 없다."

    "base.scss 안에, pure 하지 않은 것이 하나라도 있다면, 가져올때 @use 를 사용할 수 없다."

나는 안되던데, DOCS 에는 된다한다. 나는 안된다. 

 

8. mixin의 함수처럼 활용 (with. if 의 사용)

if 는 특히나 boolean 형식에서 사용할때 유용하다.

    <정의 background.scss>

        @mixin main__div($size, $radius: 0) {
            width: $size;
            height: $size;
            border: 1px solid;

            @if ($radius !=0) {
                border-radius: 5px;
            }
        }

    <사용>
        @use .../background.scss

        .mail__div{
            @include main__div(30px)
        }

        .mail__div{
            @include main__div(30px,20)
        }

 

9. forward 를 사용한, 상속(?) 구현

    <src/_list.scss>
        @mixin list-reset {
            margin: 0;
            padding: 0;
            list-style: none;
        }

    <bootstrap.scss>
        @forward "src/list";            // 한다리 거쳐서

    <styles.scss>
        @use "./bootstrap" as boot;     // 사용 가능하다.

        li {
            @include boot.list-reset;
        }

 

 

10. as 를 이용해, 이름 변경하여 @use 하기, + * 를 사용해, 동적으로 아무거나 붙여도 작동되게 만들기

    <src/_list.scss>
        @mixin list-reset {
            margin: 0;
            padding: 0;
            list-style: none;
    }
    
    <bootstrap.scss>
        @forward "src/list" as list-*;            //  * 을 사용하여

    <styles.scss>
        @use "./bootstrap" as boot;     // 사용 가능하다.

        li {
            @include boot.list-reset;
            @include boot.list-anything
    }

 

11. @function 사용하기

    @function pow($base, $exponent) {
        $result: 1;
        @for $_ from 1 through $exponent {
            $result: $result * $base;
        }
        @return $result;
    }

    .sidebar {
        float: left;
        margin-left: pow(4, 3) * 1px;
    }
    
   ** "for $_" 의 의미는 굳이 정의된 값을 사용하지 않고, 반복함을 의미한다.
   
   => 12번 "@for" 에서 계속

 

12. @for 사용하기

    < css 의 경우 >
        ul:nth-child(3n + 1) {
          background-color: #004080;
        }

        ul:nth-child(3n + 2) {
          background-color: #004d99;
        }

        ul:nth-child(3n + 3) {
          background-color: #0059b3;
        }
    
    
    < scss >
    값을 정의하고 "from" 과 "through" 를 사용하여, 정의할 수 있다.

        @for $i from 1 through 3 {
            ul:nth-child(3n + #{$i}) {
            background-color: lighten($base-color, $i * 5%);
            }
        }
    
    만약 값을 정의하지 않는다면 "$_" 으로 설정하고, 그냥 반복되게 만들 수 있다.

 

아직 많지만 일단 여기까지 알아보자.