Sass[SCSS] 기초 이론 1 - 주석, 중첩(Nesting), 부모 선택자 참조(& Ampersand) 사용하기

Sass

Scss 기초적인 부분을 기록해두려고 합니다.

우선 주석을 사용해볼게요. Scss 의 주석은 두가지가 있는데 자바스크립트와 마찬가지로

해당하는 줄에 적용하는 주석인 //, 그리고 해당하는 지정영역에 적용하는 주석인 /*  */ 이 두 가지가 있습니다.

// 이 주석은 컴파일 후에 사라짐
/* 이 주석은 컴파일 후에도 남아있음 */

scss 주석

컴파일된 css 파일

여기서 특이점은 // 주석은 컴파일된 css 파일에서 사라진다는 점입니다.

반면에 /* */ 주석은 컴파일돼서 css 파일에 잘 나타나는 모습입니다. 컴파일 된 후에도 남아있어야 할 주석은 /*  */으로 해줘야 겠죠??

 

이어서 기본적인 scss를 쭉 작성한 코드를 올려볼게요 :)

// 이 주석은 컴파일 후에 사라짐
/* 이 주석은 컴파일 후에도 남아있음 */
.link-list {
  .link-item { // 선택자 중첩(Nesting)
    .link {
      display: inline-block;
      text-align: center;
      &:hover, &:focus { // 부모요소 선택자 참조 &(Ampersand)
        color: gold;
      } 
      &::before, &::after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: blue;
      }
      &:hover::before, &:focus::before {
        background-color: skyblue;
      }
      &:hover::after, &:focus::after {
        background-color: darkblue;
      }
      &-block {
        display: block;
      }
      &-flex {
        display: flex;
      }
      &.red {
        color: red;
      }
    }
  }
}

 

scss는 중첩(Nesting)이 가능한데, 위에서처럼 .link-list 안에서 괄호를 열어가면서 계속 중첩해서 자식 선택자를 쓸 수 있습니다.

여기서 중첩을 사용하면 좋은점은 여기서 만약 HTML에서 link-list 라는 클래스가 link-group 이라는 클래스로 변경이 된다면

실제 css에서는 link-list 부분을 전부 찾아서 일괄 변경을 해줘야하는 번거로움이 있는데

scss에선 중첩을 사용하기 때문에 가장 바깥에 link-list만 link-group으로 변경해주면 css로 컴파일되면서 한번에 다 바뀝니다. :)

 

그리고 괄호 안에서 부모요소 선택자를 참조할 수 있는 &(Ampersand) 를 볼 수 있는데,

위에 코드에서 &:hover 나 &::before 등으로 .link 괄호 안에서  .link 를 참조해서 사용할 수 있습니다.

 

아래쪽에 &-block 이나 &-flex 와 같이 저런식으로 응용해서 사용하면 link-block 클래스와 link-flex 클래스에 css를 줄 수 있고,

마찬가지로 &.red 를 사용하면 .link.red, 즉 link 클래스와 red 클래스를 둘 다 가지고 있는 선택자를 선택할 수 있습니다.

 

아래는 이렇게 해서 컴파일된 css 파일입니다.

 

@charset "UTF-8";
/* 이 주석은 컴파일 후에도 남아있음 */
.link-list .link-item .link {
  display: inline-block;
  text-align: center;
}
.link-list .link-item .link:hover, .link-list .link-item .link:focus {
  color: gold;
}
.link-list .link-item .link::before, .link-list .link-item .link::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: blue;
}
.link-list .link-item .link:hover::before, .link-list .link-item .link:focus::before {
  background-color: skyblue;
}
.link-list .link-item .link:hover::after, .link-list .link-item .link:focus::after {
  background-color: darkblue;
}
.link-list .link-item .link-block {
  display: block;
}
.link-list .link-item .link-flex {
  display: flex;
}
.link-list .link-item .link.red {
  color: red;
}

 

추가로 접두어(Prefix) 와 @at-root 의 사용법도 알아볼게요.

.link-list {
  font: { /* 접두어(Prefix) - 공통 접두어 부분 합쳐 사용하기 */
    size: 18px;
    weight: bold;
  }
  .link-item {
    color: red;
    @at-root .link { /* @at-root 부모 선택자 중첩 나가기 (중첩 안에서 사용하면서 중첩 바깥으로 빼기) */
      display: block;
    }
  }
}

이런식으로 font-size와 font-weight에 공통으로 들어가는 접두어 font를 이용해서 저런식으로 작성해줄 수 있습니다.

@at-root의 경우는 중첩 안에서 사용하면서 중첩 바깥으로 빼는 경우에 사용하는데 아래 컴파일된 모습처럼 @at-root .link를 선택해준 부분은 .link 로 컴파일된걸 볼 수 있습니다.

.link-list {
  font-size: 18px;
  font-weight: bold;
}
.link-list .link-item {
  color: red;
}
.link {
  display: block;
}