SCSS 네스팅

🗓2020년 02월 27일 ∙ 🖊TutorialPost ∙ ⏳2분

Sass는 CSS preprocessor 의 하나로 현재 가장 폭넓게 사용되는 CSS Preprocessor입니다.

Sass의 초창기 문법은 css와 판이합니다. css의 대괄호 {}와 세미콜론 ; 을 사용하지 않아 문법적으로는 간소하지만 CSS에 익숙한 기존 개발자에게는 익숙해지기 쉽지 않았습니다.

현재는 CSS의 상위 집합으로써 CSS를 확장한 문법이라 할 수 있는 SCSS가 주로 사용되며 확장자 또한 .sass, .scss 로 서로 다릅니다.

scss를 사용하게 되면 기존에 사용하던 CSS 코드를 곧바로 SCSS 코드로 활용할 수 있게됩니다.

공식사이트 - http://sass-lang.com/ Sass 인터프리터 - https://www.sassmeister.com/

네스팅

SCSS를 이용해 자식 관계에 있는 선택자를 쉽게 표기할 수 있습니다. 네스트되어 있는 선택자에 가상 클래스 선택자를 적용하고 싶을 때는 &:hover 와 같이 예약문자 &를 사용합니다.

// SCSS Nesting
.books {
  margin: 0px;
  li {
    margin: 4px;
    list-style-type: none;
    a {
      color: #0000ff;
      &:hover { color: #00ff00; }
    }
  }
}

위 SCSS 코드를 CSS로 변환하면 아래와 같습니다.

/* CSS */
.books {
  margin: 0px;
}
.books li {
  margin: 4px;
  list-style-type: none;
}
.books li a {
  color: #0000ff;
}
.books li a:hover {
  color: #00ff00;
}

속성 네스팅

선택자 뿐 아니라 css 속성들도 네스팅 할 수 있습니다. font-weight, font-family 등과 같은 속성들도 아래와 같이 괄호를 이용해 묶을 수 있습니다.

// 속성 네스팅
.ad {
  font: {
    family: serif;
    weight: bold;
  }
  border: {
    top: {
      width: 3px;
      color: #0f0;
    }
    bottom: {
      width: 3px;
      color: #00f;
    }
  }
}

CSS로 변환 시

/* CSS */
.ad {
  font-family: serif;
  font-weight: bold;
  border-top-width: 3px;
  border-top-color: #0f0;
  border-bottom-width: 3px;
  border-bottom-color: #00f;
}

주석

주석은 css 코드 내에 설명 혹은 참조를 위한 코멘트를 남기는 것으로, scss에서는 기존 css의 주석인 /**/ 로 감싸는 주석 외에도, // 로 시작하는 주석 역시 사용할 수 있습니다. 특히 // 를 사용하게 되면 scss 파일을 css로 컴파일 할 경우 컴파일 한 결과에는 주석이 포함되지 않습니다.

// 한줄 주석. 컴파일 결과에는 나타나지 않는다.

/* 
* 여러줄 주석
*/
SHARE