면접을 준비하면서도 정말 많이 들어봤고 실제로 업무에서도 써 보고 있지만 정작 Sass가 뭔지, 개인적으로 사용해 본 경험도 없다.
해서 Sass가 무엇인지 정리부터 하고 개인 프로젝트에서 하나하나씩 써보도록 하자
Sass란
Sass(Syntactically Awesome StyleSheets : 문법적으로 개쩌는 스타일시트)는 CSS(종속형 시트)로 해석 및 컴파일되는 스크립트 언어이다. CSS의 전처리기로서 CSS의 한계와 단점을 보완하여 보다 가독성 높고 재사용성 높은 CSS를 만들 수 있다.
단, 말 그대로 전처리기이기 때문에 웹에서 동작 가능한 표준의 CSS로 컴파일해서 동작시킨다.
공식 문서에 의하면
Sass는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다.
Sass는 특히 객체 지향 언어와 같은 더 전통적인 언어에서 사용 가능하면서 CSS 자체적으로는 이용 불가능한 여러 매커니즘을 제공함으로써 CSS를 확장한다.
- 변수 사용
- 조건문, 반복문
- Import
- Nesting
- Mixin
- Extend / Inheritance
등등 점점 규모가 커지는 프로젝트에서 사용 시 그 진가가 빛을 발한다. 실제로도 그 편의성을 몸소 느끼는 중..
이제 써보자
설치하기
npm install -g sass트랜스파일링
sass-project 디렉토리 만들고 트랜스파일링할 foo.scss 파일 생성
- 트랜스파일링이란
특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것
한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것
// foo.scss
@use "sass:math";
$site_max_width: 960px;
$font_color: #333;
$link_color: #00c;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: math.div(20px, $font_size);
body {
color: $font_color;
// Property Nesting
font: {
size: $font_size;
family: $font_family;
}
line-height: $line_height;
}
#main {
width: 100%;
max-width: $site_max_width;
}트랜스파일링할 scss 파일의 경로와 트랜스파일링 후 생성될 css 파일 경로 지정
sass foo.scss:foo.css위 명령어 실행 시 foo.css 파일이 생성된다
// foo.css
body {
color: #333;
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.25;
}
#main {
width: 100%;
max-width: 960px;
}
/*# sourceMappingURL=foo.css.map */특정 디렉토리 내의 모든 scss 파일을 css 파일로 일괄로 지정한 디렉터리에 저장하려면
sass input-directory:output-directory이게 귀찮으면 npm scripts로 간단하게 하자
npm init -y// package.json
{
"name": "sass-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:sass": "sass src/scss:dist/css"
},
"keywords": [],
"author": "",
"license": "ISC"
}style
트랜스파일링 시 expanded(표준 스타일)와 compressed(압축된 스타일) 두가지 스타일 중 하나를 선택할 수 있다. 기본값은 expanded
watch
매번하기 귀찮으니까 감시시키자
sass --watch src/sass:dist/css이거를 package.json에 선언할 수도 있음
// ...
"scripts": {
"build:sass": "sass --watch src/sass:dist/css \" sass src/sass:dist/css\""
},
// ...