[SCSS] - 02. 선택자 중첩(Nesting)

선택자 중첩

• 가장 기본적이면서 필수적인 기능으로, 상위 선택자의 반복을 최소화 시키면서 복잡한 css구조를 단순화 한다.
• body 안에는 선언하지 않고 독립적으로 선언한다.
• 자식요소 선택자의 경우 부모요소 선택자의 중괄호 안에 선택자를 선언하고 다시 중괄호로 묶는다.
  

👊 예제

<ul class="social">
     <li><a href="#none">facebook</a></li>
     <li><a href="#none">twitter</a></li>
     <li><a href="#none">instagram</a></li>
     <li><a href="#none">youtube</a></li>
</ul>

.social {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 600px;
    display: flex;

    li {
        border: 1px solid #000;
        padding: 10px;
        flex: 1;
        text-align: center;

        a {
            color: #000;
            text-transform: uppercase;
        }
    }
}

• social 이라는 클래스 안에 중첩 (Nesting)하여 자식요소들을 나열한다.
• a 태그도 li의 자식요소 이기 때문에 social 안의 li태그 안에 적어주어야한다.
  
  

👍 SCSS의 장점!

• 이때 social이라는 클래스를 sns로 바꾸고 싶을때 scss에서는 한군데만 변경해주면 되지만 css에서는 모든곳에 다 바꿔줘야한다.

• style.css -> .social 부분 모두 변경해주어야함.

🙆 RESULT

➕ 추가

• display:flex; 하여 가로로 나열한다.
• 자식요소들(li)에 flex:1; 을 적용하여 동등하게 배치되도록한다.

---

중첩 - 부모 선택자 참조(&)

• scss에서는 부모요소 선택자를 간편하게 참조하는 기능을 &를 사용한다.
• 키워드 &로 쉽고 간명하게 파악할 수 있음

  & : 부모요소 선택자!

👊 예제

<div class="btn-outer">
     <a class="btn" href="#none">CodingWorks Class</a>
</div>

.btn-outer {
    .btn {
        color: #fff;
        text-transform: uppercase;
        width: 300px;
        display: inline-block;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background-color: #555;
        transition: 0.3s;
        position: relative;

        &:hover {
            background-color: transparent;
        }

        &:before,
        &:after {
            content: '';
            width: inherit;
            height: inherit;
            border: 1px solid #fff;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: 0.3s;
        }

        &:hover:before {
            opacity: 1;
            transform: rotate(45deg);
        }

        &:hover:after {
            opacity: 1;
            transform: rotate(-45deg);
        }
    }
}

• 부모 선택자(.btn)를 참조할 때는 .btn:hover 이런식으로 쓰지않고 & 기호를 사용하여 부모 선택자를 가리킨다.

🙆 RESULT

---

부모 선택자 응용

👊 예제

<section>
     <h1 class="font-large">This is H1 Headline</h1>
     <h2 class="font-medium">This is H2 Headline</h2>
     <h3 class="font-small">This is H3 Headline</h3>
</section>

• 클래스 네임이 font-머시기 로 통일 되고있다 이럴때 부모 선택자를 이용하여 변수처럼 사용할 수 있다.

.font {
    // .font-large {...} 로 응용
    &-large {
        font-size: 60px;
        color: crimson;
        text-transform: uppercase;
    }

    &-medium {
        font-size: 40px;
        color: yellowgreen;
        text-transform: uppercase;
    }

    &-small {
        font-size: 20px;
        color: royalblue;
        text-transform: uppercase;
    }
}

🙆 RESULT