[프론트엔드] Sass란

김학재·2021년 8월 12일
2

프론트엔드

목록 보기
9/12
post-thumbnail

면접을 준비하면서도 정말 많이 들어봤고 실제로 업무에서도 써 보고 있지만 정작 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\""
  },
// ...
profile
YOU ARE BREATHTAKING

0개의 댓글