Sass/SCSS 문법 1. 중첩(Nesting)과 주석

1. 주석

scss/sass 파일에서 한줄 주석(//)은 CSS 파일로 빌드되면 보이지 않는다.

여러줄 주석(/* */)은 CSS파일로 빌드되어도 보인다.

 

2. 중첩(Nesting)

중첩을 사용하면 HTML의 시각적 계층방식과 동일하게 CSS를 중첩하여 작성할 수 있다. CSS 코드가 구조화 되어 가독성이 높아지며 유지 보수하기 편리해진다.

기존 CSS는 부모에게 상속된 자식 요소에게 스타일을 적용하려고 할 때마다 최상위 선택자를 반복 선언해야 한다. 하지만 중첩을 사용하면 최상위 선택자를 한번만 선언하여도 자식 선택자에게 스타일을 적용할수 있게 되어 코드 반복을 줄이게 된다.

 

<nav>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
        </ul>
    </nav>

//scss

nav{
    background: yellow;
    ul{
        display:flex;
        justify-content: space-between;
        li{
            background: black;
            color:white;
            list-style: none;
        }
    }
}

//css
nav {
  background: yellow;
}
nav ul {
  display: flex;
  justify-content: space-between;
}
nav ul li {
  background: black;
  color: white;
  list-style: none;
}/*# sourceMappingURL=style.css.map */

** 하지만 지나친 중첩을 사용하면 코드의 가독성이 떨어지고 컴파일 했을 경우 불필요한 선택자를 사용하게 될 수 있다.

 

3. 단축 속성 중첩(:  namespace 속성 중첩)

중첩은 선택자 뿐만 아니라 스타일 속성들도 가능하다.

<div class="icon">
        <p>안녕하세요</p>
</div>

//SCSS

.icon{
    background :{
        color:black;
    }
    p{
        color:white;
    }
}

//CSS
.icon {
  background-color: black;
}
.icon p {
  color: white;
}/*# sourceMappingURL=style.css.map */

 

4. 앰퍼샌드(&, Ampersand, 상위 선택자 참조)

상위에 있는 부모선택자를 가리킨다.(자신을 감싸고 있는 선택자)

1)  &을 이용해 after, hover 등의 가상요소, 가상클래스, class, id 셀렉터 등을 참조 할 수 있다.

//SCSS

ul{
    li{
        &:hover{
            background: white;
            cursor: pointer;
            //가상요소
        }
        &:last-child{
            border-bottom: 2px solid yellow;
        }
    }
}

//CSS

ul li:hover {
  background: white;
  cursor: pointer;
}
ul li:last-child {
  border-bottom: 2px solid yellow;
}/*# sourceMappingURL=style.css.map */

2) 공통 클래스 명을 가진 선택자들을 중첩시킬 수 있다.

<div class="box-yellow">a</div>
<div class="box-green">b</div>
<div class="box-purple">c</div>

//SCSS

.box{
    &-yellow{
        background: #ffd500;
    }
    &-green{
        background: green;
    }
    &-purple{
        background: purple;
    }
}

//CSS

.box-yellow {
  background: #ffd500;
}
.box-green {
  background: green;
}
.box-purple {
  background: purple;
}/*# sourceMappingURL=style.css.map */

3)  &은 자신의 부모 선택자를 참조하지만 중첩이 깊어지면, 자신의 직계 부모가 아닌 최상위 부모 선택자로부터 참조된다.

 

---

참고

 

https://millie.page.link/fJ1WA

40 minutes Basic Sass

https://youtu.be/mvxUh3atiGc