SCSS 선택자 &: &:: &. 차이점 정리

리액트로 투두리스트를 만드는데 SCSS 부분에서 &: 와 &::와 &. 이 등장했다.

이 세개의 차이점을 정리해야겠다는 생각이 들었다.

SCSS에서 &는 상위 선택자로 nesting 해주는 기능을 한다.

.btn {
    width: 200px;
    height: 60px;
    border-radius: 30px;
    
    &Blue {			// .btnBlue
      background-color: blue;
    }
    
    &Red {			// .btnRed
      background-color: red;
    }
}

위의 코드처럼 &Blue 라면 btn Blue 인 클래스명을 가진 속성에 파랑색 배경을 적용시키겠다는 뜻이다.

🔍 &:

&: 는 가상선택자로써 그 : 뒤에 특정 이벤트를 적고 그 특정 이벤트가 발생할때 나타날 동작을 적용시킬 수 있다.

.TodoInsert{
    display: flex;
    background-color: #495057;


    button{
        background: none;
        outline: none;
        border: none;
        background: #868e96;
        color: white;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: 0.1s background ease-in;
        &:hover{
            background-color: #adb5bd;
        }
    }
}

여기서 &: 는 button 을 가리킨다.

🔍 &::

.TodoInsert{
    display: flex;
    background-color: #495057;
    input{
        background: none;
        outline: none;
        border: none;
        padding: 0.5rem;
        font-size: 1.125rem;
        line-height: 1.5;
        color: white;
        &::placeholder{
            color: #dee2e6;
        }

        flex: 1;
    }

}

&:: 도 가상선택자인데, 뒤에 placeholder를 입력해서 인풋창의 placeholder 창 배경색상을 변경시켜줄 수 있다.

🔍 &.

.TodoListitem{
    padding: 1rem;
    display: flex;
    align-items: center;
    &:nth-child(even){
        background-color: #f8f9fa;
    }

    .checkbox{
        cursor: pointer;
        flex: 1;
        display: flex;
        align-items: center;
        svg{
            font-size: 1.5rem;
        }
        .text{
            margin-left: 0.5rem;
            flex: 1;
        }

        &.checked{ // .checkbox .checked
            svg{
                color: #22b8cf;
                text-decoration: line-through;
            }
        }
    }

}

여기서 &.checked 는 checkbox checked 라는 클래스명으로써 checkbox 안에 포함되어 있는 클래스이다.