Sass(SCSS) 주석과 중첩

Sass

Syntactically Awesome Style Sheets

주석과 중첩

주석

CSS에서 주석은 /와 /로 만든다.
Sass에서는 CSS 주석 외에 한 줄 주석인 // 지원

컴파일 했을 때 CSS 주석은 그대로 남아 있지만 한 줄 주석은 사라진다.

/**/ : 여러줄 주석, 컴파일에 반영되는 주석
// : 한줄 주석, 컴파일 되지않는 주석

중첩규칙 (Nesting)

상위 선택자를 반복을 줄이고 더욱 편리하고 단순한 구조를 작성할 수 있다.
선택자나 속성의 관계를 중첩 형태로 표현

CSS 코드

div {
	width: 100px;
    height: 100px;
}
div p {
	color: red;
}
div p span {
	color: blue;
}

css에서는 스타일을 정의하기 위해 상위 선택자를 서로 다른 선언문에서 반복해서 써야하는 경우가 있다.
스타일 시트의 규모가 커질수록 자주 발생 -> 복잡한 코드

SCSS 코드

div{
	width: 100px
    height: 100px
	p {
    	color: red;
        
    	span {
        	color: blue;
        }
    }
}

sass에서는 선택자를 서로 중첩해 쓸 수 있다.
컴파일 후 결과 파일에는 선택자가 각자 따로 생성되어 반영된다.

• 선택자를 일일이 입력하지 않아도 된다
• 독립적인 선언문이 많아지지 않음 -> 코드 수정 용이

중첩규칙

.container {
  background-color: lightgray;

  h1 {
    color: red;
  }

  p {
    color: tomato;

    span {
      color: cyan;
    }
  }
}