Sass란?
CSS 전처리기(Pre-Processor) 중 하나로, CSS 확장 언어이다. 이러한 Sass는 변수, 중첩 규칙, 믹스인, 함수 등을 사용할 수 있는 환경을 제공하며 모든 CSS 버전과 호환이 가능하여 CSS를 보다 쉽게 관리할 수 있다. Sass의 종류로는 Dart Sass, LibSass, Ruby Sass가 있었지만, LibSass와 Ruby Sass는 호환성 문제로 현재는 Dart Sass의 사용만 권장되고 있다.
전처리기를 사용하는 이유는 애플리케이션의 규모가 커지면서 스타일시트를 관리하기 어려워졌기 때문에, 모듈화, 변수 사용 등으로 CSS를 보다 쉽게 유지 관리하고자 함이다.
Sass 설치
-
터미널에 node-sass install
npm i sass -
scss와 컴파일 할 css 연결
- Sass 파일 : CSS 파일 →sass <input.scss> <output.css>
- Sass 디렉토리 : CSS 디렉토리 →sass <input.scss>:<output.css> <input/>:<output/> <dir/>
.css.map 이란?
Sass를 별도의 처리 없이 CSS와 연결하면 .css.map이라는 확장자로 CSS 파일명과 동일한 이름을 가진 파일이 생성된다. 이때 .css.map은 Sass 의 소스 출처를 제공하는 역할로 브라우저에서도 경로를 탐색할 수 있도록 도와준다. 해당 파일은 개발을 용이하게 하기 위해 필요한 것으로, 배포 시에는 파일을 제거하고 베포하는 것이 좋다.
예시
sass app.scss app.css
Sass와 SCSS
Sass는 Sass와 SCSS, 두 가지 구문을 제공하고 있다. 즉 Sass와 SCSS는 Sass라는 동일한 전처리기로 작성 문법에만 차이를 가지고 있다. 때문에 Sass(.sass)와 SCSS(.scss)의 파일은 하나의 css로 컴파일이 가능하다. 둘 중에서는 SCSS 구문이 CSS의 작성 형태와 유사하다는 장점으로 Sass 구문보다 더 많은 사용자를 보유하고 있다.
구문 형태 비교
@mixin button-base()
@include typography(button)
@include ripple-surface
@include ripple-radius-bounded
display: inline-flex
position: relative
height: $button-height
border: none
vertical-align: middle
&:hover
cursor: pointer
&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none@mixin button-base() {
@include typography(button);
@include ripple-surface;
@include ripple-radius-bounded;
display: inline-flex;
position: relative;
height: $button-height;
border: none;
vertical-align: middle;
&:hover { cursor: pointer; }
&:disabled {
color: $mdc-button-disabled-ink-color;
cursor: default;
pointer-events: none;
}
}Sass 7-1 패턴
- Sass 파일 구조를 의미
- 7개의 폴더 + 1개의 메인 파일
7개의 폴더
- abstracts/: 추상화 돼야 할 것들
- _variables.scss: Sass 변수
- _functions.scss: Sass 함수
- _mixins.scss: Sass 믹스인
- _placeholders.scss: Sass 플레이스홀더
- base/: 기본이 되는 스타일
- _reset.scss: 리셋/정규화
- _typography.scss: 타이포그래피 규칙
- 기타
- components/: 각각의 스타일
- _buttons.scss: 버튼
- _carousel.scss: 캐러셀
- _cover.scss: 커버
- _dropdown.scss: 드롭다운
- 기타
- layout/: components 보다 큰 요소
- _navigation.scss: 네비게이션
- _grid.scss: 그리드 시스템
- _header.scss: 헤더
- _footer.scss: 푸터
- _sidebar.scss: 사이드바
- _forms.scss: 폼
- 기타
- pages/: 페이지 단위의 스타일
- _home.scss: 홈 한정 스타일
- _contact.scss: 연락처 한정 스타일
- 기타
- themes/: 다크, 라이트 테마 등
- _theme.scss: 디폴트 테마
- _admin.scss: 관리자 테마
- 기타
- vendors/: 외부 리소스
- _bootstrap.scss: Bootstrap
- _jquery-ui.scss: jQuery UI
- 기타
1개의 메인 파일
- main.scss: 메인 Sass 파일
파일명에 언더스코어_ 를 사용하는 이유
Sass는 파일을 CSS로 변환할 지, 안할지 지정할 수 있다. 파일명 앞에 언더스코어(_)를 붙이는 것은 CSS의 부분(Partials)으로 사용될 것이라는 것을 Sass에게 알려주는 것으로, 호출 없이는 CSS로 변환하지 않는다.
기타 규칙
네이밍에서의 하이픈(-)과 언더스코어(_)
- 변수, mixin, function 등의 이름을 지정할 때 Sass에서는 하이픈(
-)과 언더스코어(_)를 구분하지 않음 - 둘 중 어느것을 사용해도 동일한 것으로 인지하기 때문에 컨벤션이 필요함
인수 목록 받기
- JavaScript의 function은 나머지 인자를 받을 때
...인자로 작성하는 반면, Sass는 나머지 인자를 받을 때인자...로 작성해야 함
