SASS

(Syntactically Awesome Sytle Sheets)

1. CSS의 한계와 단점을 보완하여 보다 가독성이 높고, 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장

2. CSS 한계 보완을 위한 다음과 같은 기능들을 제공

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting (Property Nesting)
• Mixin
• Extend / Inheritance

3. Sass의 장점

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현 가능
• 구문의 수준 차이를 평준화할 수 있음
• Mixin 등 강력한 기능을 활용하여 CSS의 유지보수 편의성을 큰 폭으로 향상

// SASS의 예시)
$main-color: red;
// 1. 와 같은 변수를 만들 수 있음
h1 { color : $main-color; }
// 2. 와 같이 돌려쓸 수 있음!
// 3. 수정이 필요해지면 변수의 값만 바꾸면 되니, 유지보수가 훨씬 편해짐

SASS = CSS Preprocessor

1. CSS가 만들어지기 전에 이런저런 일들을 먼저 처리해줌
   변수 뿐만 아니라 @for (반복문), @if (조건문) 같은 흐름 제어문,
   내장함수 등 다양한 문법을 사용할 수 있음

2. Sass 3 버전에서 좀 더 CSS에 호환될 수 있도록 도입된 것이 SCSS 문법
   SCSS를 쓰면 CSS를 쓰던 방식과 유사하게 Sass의 기능을 사용할 수 있음

• 대괄호와 세미콜론을 사용하고 있어서 좀 더 친숙하게 사용 가능!

$_starType: ( default: 1.7rem, bbs: 1.8rem, total: 3rem );

@each $type, $size in $_starType {
	@if $type != default {
		.prdStar.type-#{$type} {
			.prdStarBack {
				width: $size * 5;
				height: $size,
				background-size: $size;
			}
			
			.prdStarIcon {
				background-size: $size;
			}
		}
	}

	@if $type == total {
		.prdStar.type-#{$type} {
			.prdStarScore {
                margin-left: .6rem;
                font-size: 3rem;
                font-weight: $mediumWeight;
                color: #000;
                line-height: 120%;
			}
		}
	}
}

SASS 시작하기

• 간단한 실행은 여기서 가능

브라우저는 Sass 문법을 알지 못하기 때문에
Sass(.scss) 파일을 css 파일로 트랜스파일링(컴파일) 하여야 함

1. 컴파일러 설치

$npm install sass -g

2. 컴파일 실습

커맨드 창에

sass <변환할 scss 파일명>:<변환될 css 파일명> // 파일 변환
sass src/sass:dist/css // 디렉터리에 저장

을 입력!

3. SASS watch 옵션

1) 파일 감시

sass --watch style.scss:style.css

--watch 플래그를 넣어 Sass가 해당 파일을 감시하게 만들 수 있음
style.scss에 변화가 생기면 알아서 컴파일하게끔!

2) 폴더 감시

sass --watch scss:css

scss 폴더 내 모든 변경사항을 감지하고, css 폴더로 컴파일하도록 만듦

그러면 scss 폴더 내 .scss 파일이 변경될 때마다 .css 파일을 만들어줌
감시를 취소하려면 ctrl+C를 입력하면 됨

4. npm scripts를 활용한 명령어 축약

// in package.json
{
  ...
  "scripts": {
    "build:sass": "sass src/sass:dist/css"
  },
  ...
}
  
// script
$ npm run build:sass

5. Style

scss 파일을 트랜스파일링하여 css 파일을 생성할 때 2가지 스타일 중 하나를 선택할 수 있음

expanded

표준적인 스타일의 css 파일이 생성됨

$ sass --style expanded src/sass:dist/css
===
$ sass src/sass:dist/css

compressed

가능한 빈공간이 없는 압축된 스타일의 css 파일이 생성됨

$ sass --style compressed src/sass:dist/css

소스맵의 역할

.map = 소스맵(SourceMap) 파일

1. 컴파일된 소스를 원본 소스로 맵핑해주는 역할을 수행
   말그대로 원래 소스가 어디에 있는지 보여주는 지도 역할을 수행!

• .map 파일이 있으면 브라우저에서 .scss 파일을 볼 수 있음

2. 소스맵은 Sass 뿐만 아니라, Webpack 등 번들링 도구에서도 제공함