[Sass] Sass - 주석, 변수, 중첩 규칙, 믹스인, 인자

🍰 주석

: SCSS, Sass 구문 간 주석이 작동하는 방식이 다름. 

// 컴파일 된 CSS 파일에 출력 X

/* 컴파일 된 CSS 파일에 출력 O but 압축 모드에서는 X */

/* 이 주석은 인터폴레이션도 포함 O
* 9 + 7 = #{9 + 7} */

/*! 이 주석은 압축 모드에서도 출력 O */

🍰 변수(variables)

: Sass 가 제공하는 변수 구문은 독자적인 방식으로 웹 브라우저가 해석할 수 없음. 아래 코드는 SCSS 변수.

 

왼쪽 - scss, 오른쪽 - css

🍰 중첩 규칙(nested rules)

: Sass는 HTML과 동일한 시각적 계층 구조를 따르는 방식의 스타일 작성 방법 지원

단, 무리한 중첩은 복잡성 증대시켜서 피해야 함.

🍰 믹스인(mixins)

: 재사용할 코드 그룹 선언 가능

🍰 인자

: 자바스크립트 함수처럼 인자설정 가능. 믹스인 외부에서 전달한 값을 믹스인 내부에서 사용해 재사용성 높여줌.