Portfolio

CSS 전처리기

CSS 전처리기란?

자신만의 특별한 syntax를 가지고 CSS를 생성하도록 하는 프로그램
CSS에는 존재하지 않는 특징을 가져, CSS 구조를 가독성있고 더 유지보수 하기 좋게 함
Sass 등이 있다

* 전처리기: 컴파일을 실행하기 전에 처리하는 것

CSS 전처리기 사용하려면?

방법1) 웹 server에 CSS 컴파일러를 설치
방법2) 개발환경에서 컴파일한 후 컴파일된 CSS 파일을 웹 서버에 업로드

Sass

Sass(.scss) 파일에서 작성. 후에 이 파일을 css 파일로 트랜스파일링(컴파일)하여야 한다.

기능들

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

SCSS

Sass의 표기법 중 하나로, CSS에 더 친화적임 (cf. SASS 표기법)

Sass 3.0부터 SCSS 표기법이 기본 표기법이 되었다.

SCSS vs SASS vs CSS

ㅤ	SCSS 표기법	SASS 표기법	CSS
중괄호 {}	필요	불필요（공백 2문자 들여쓰기가 코드 블록을 의미)	필요
세미콜론 ;	필요	불필요	필요
: 뒤의 공백	불필요	필요	불필요
Mixin	@mixin	=	없음
Include	@include	+	없음
확장자	.scss	.sass	.css

www.sassmeister.com에서 에디터 제공

Sass는 2006년 Ruby로 처음 개발되었고, 이후 Ruby Sass를 C++로 포팅한 Libsass, node.js 환경에서 Libsass를 사용할 수 있는 node-sass 등 다양한 포팅 버전이 등장했다. Sass는 최근에 Dart Sass로 재구현되었다. Libsass나 node-sass는 현재 유지 관리는 되고 있으나 폐지되었으므로 Dart Sass를 사용하는 것을 권장한다

Sass 사용 방법

sudo npm install -g sass

sass --version 로 버전 확인

scss 파일 작성

트랜스파일링: sass ${scss파일이나 폴더}:${트랜스파일링될 파일이나 폴더}

폴더를 지정하면 해당 폴더 안에 모든 scss파일을 컴파일링

watch 옵션 : scss 파일의 변경을 감지하여 변경될 때마다 scss 파일을 트랜스파일링하여 css 파일을 자동 업데이트

⇒ sass --watch src/sass:dist/css

package.json에서 단축 명령어를 선언할 수 있음

cd sass-project 후에 npm init -y 로 package.json 만들고


{
  "name": "sass-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "명령어": "트랜스파일링 명렁어"  //이제 'npm run 명령어'로 컴파일링 가능
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

index.html 파일에서 트랜스 파일링된 css파일 선언

CSS 전처리기, Sass

CSS 전처리기

Sass

SCSS

Sass 사용 방법