개념 및 설치
1. 개념
Sass 공식 문서에서 “Sass는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다.” 라고 묘사하고 있습니다.
꼭 해야하는가?
이미 CSS가 익숙해질때로 익숙해져 있었던 시점에 Sass가 나왔고,
꼭 해야하는가를 두고 마크업 개발자 사이에서도 말이 많았던 시기가 있었지만,
한번 써본다면 그런말들은 쏙 들어갈 것이라고 장담합니다.
“한번도 안해본 사람은 있지만, 한번만 해본 사람은 없다”
아마도 Sass 역시 그럴거라 생각합니다!!
Sass(SCSS)란?
Sass(Syntactically Awesome StyleSheets)는 CSS의 단점을 보완하기 위해 만든 CSS 전처리기(Preprocessor)입니다.
CSS는 다른 언어들에 비해 접근이 쉽고, 배우기 쉬운편이나 단계가 올라갈 수록 점점 복잡해지고 꼬이는 부분이 많아지며, 협업을 통해 혼자만 관리하지 않고 여러명이 함께 CSS를 사용할때는 더더욱 불편함이 많아지는데, Sass는 이런 불편함을 해소해주며 효율적으로 CSS를 관리하게 해줍니다.
이제는 Sass없이 코딩을 한다는건 상당히 귀찮고 불편한 일이 되어버렸습니다.
Sass는 CSS와 비슷하지만 선택자의 중첩(Nesting)이나, 변수, 조건문과 반복문, Import, Mixin, Extend/Inheritance, 내장함수 등 다양한 문법들을 사용할 수 있습니다.
Sass는 CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있으며,
CSS에는 존재하지 않는 Mixin등의 강력한 기능을 활용하여 CSS의 관리의 편의성을 향상 시킬 수 있습니다.
많은 전처리기들 중 여기서는 Sass(SCSS)를 설치하고 사용해보려고 합니다. 다른 전처리기들보다 안정적이고, 2006년 부터 시작하여 가장 오래된 확장 언어로 높은 성숙도와 많은 사용자를 가지고 있으며, 기능 또한 훌륭합니다.
Scss는 Sass의 3번째 버전으로 CSS에 호환될 수 있도록 도입된 문법이며, Sass의 모든 기능을 지원하는 CSS 상위집합입니다.
Sass와 SCSS는 거의 같지만, 실무에서는 CSS와의 호환성과 익숙한 형태인 SCSS를 주로 사용하므로 이 글에서도 SCSS를 사용합니다.
SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}Sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorSass와 SCSS는 거의 같다고 생각하면 되고 {}와 ; 의 유무로 구분됩니다.
전처리(Preprocessor)기란? 자신만의 특별한 Syntax를 가지고 CSS를 생성하도록 하는 프로그램입니다. Sass외에도 LESS, Stylus, PostCss등이 있습니다. 전처리기는 말 그대로 CSS를 동작하기 전에 사용하는 기능으로 컴파일(Compile)을 통해서 CSS로 변환 후 동작이 가능합니다.
2. 설치
앞에서도 말했던것처럼 Sass(SCSS)는 웹에서 직접 동작할 수 없고, 컴파일을 해야만 적용 할 수 있습니다.
따라서 Sass 환경의 설치가 필요합니다.
Sass는 2006년 처음 Ruby로 개발되었고, Libsass, node-sass 등 다양한 버전이 등장했습니다.
그러다 2020년 말쯤 해당 Sass들은 더 이상 사용하지 않는다고 선언했고, 현재 유지관리는 되고 있으나 폐지되었으므로 Dart Sass를 사용하도록 합니다
설치 없이 간단한 컴파일은 SassMeister에서도 테스트가 가능합니다.
Sass 설치하기
Dart Sass를 설치하기에 앞서 우리는 npm을 설치해야 하는데 npm이란 뭘까요?
npm은 node package manager의 줄임말로 Javascript 프로그래밍 언어를 위한 패키지 관리자입니다. 전세계 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리합니다.
Javascript 런타임 환경 Node.js의 기본 패키지 관리자로 node.js에서 사용되는 각종 패키지들이 모여있고, 그 패키지를 다운받아서 사용할 수 있습니다.
구구절절 설명하는 것보다 실제로 사용해는것이 이해하는 것이 더 쉬우니 이해가 안되더라고 우선 설치해봅시다!
Node.js 설치
npm 사용을 위해 우선 Node.js를 설치합니다.
Node.js 사이트에서 LTS 버전을 다운받아서 설치합니다.
npm은 Node.js의 기본패키지로 함께 설치됩니다.
Node.js를 설치했다면 맥은 터미널 윈도우에서는 명령 프롬프트(이하 터미널로 표기)를 열어 아래의 명령어를 입력합니다.
$ npm -v제대로 설치가 되었다면 아래내용처럼 설치한 Node.js의 버전이 표시될 것입니다.
$ npm -v
8.19.2npm version: 2022년 12월 20일 기준
Dart Sass 설치
이제 드디어 Sass를 설치해 봅시다!
다음 명령을 사용해 Sass를 설치합니다.
$ npm install -g sass위의 명령어를 실행하면 무언가 블라블라 표시되며 설치가 완료됩니다.
설치가 잘 되었는지 아래 명령어를 입력해 버전을 확인해 봅시다.
$ sass --version
1.57.1 compiled with dart2js 2.18.6Sass version: 2022년 12월 20일 기준
컴파일(Compile)
One-to-One Mode
기본 컴파일 방법으로 하나의 파일을 컴파일할때 사용합니다.
원하는 위치에 sass_study 폴더를 만들고, style.scss 파일을 만들고,
아래의 내용을 복사해서 에디터에 붙여넣기 후 저장합니다.
Sass
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}컴파일할 파일의 경로를 cd를 이용해 입력 후 폴더위치를 지정해주고,
$ sass <input.scss> [output.css]의 형식으로 명령어를 입력해줍니다.
$ cd sass_study
// style.scss파일을 컴파일해서 style.css생성
$ sass style.scss style.css컴파일이 완료된 후 sass_study 폴더를 확인해보면 style.css 파일이 생성되어 있음을 확인할 수 있고, 아래와 같은 내용으로 컴파일된 내용을 확인할 수 있습니다.
CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}지금까지 테스트해본 SCSS와 CSS파일은 sass_study에 별도의 폴더를 지정하지 않은 상태로 컴파일을 했는데, 실제로 각각의 파일들은 폴더를 지정해서 사용하는게 대부분입니다. 아래처럼 input, output에 각각의 폴더를 지정해서 컴파일 할 수 있습니다.
// sass app/sass:public/stylesheets
$ sass scss/style.scss:css/style.cssMany-to-many Mode
실제 작업을 하다보면 하나의 프로젝트에서도 두개 이상의 파일을 컴파일 해야하는 경우가 있습니다.
그럴때 One-to-One Mode를 이용해서 컴파일하게 되면, 명령어를 번갈아가며 입력해야하는 번거로움이 생기는데,
이럴때 Many-to-many Mode를 사용합니다.
해당모드는 하나 이상의 파일을 컴파일하며, 컴파일 전 후의 파일은 콜론으로 구분합니다.
$ sass [<input.scss>:<output.css>] [<input/>:<output/>] …
// style.scss와 layout.scss 두개의 파일을 각각 style.css 과 layout.css로 컴파일 해준다
$ sass light.scss:light.css dark.scss:dark.css
// scss폴더 내에있는 .scss파일을 css폴더로 컴파일해준다.
$ sass scss:cssnpm scripts를 이용한 컴파일
npm scripts를 이용하면 위 처럼 긴 명령어를 입력하지 않고 간단하고 편리하게 명령어를 사용 할 수 있습니다.
sass_pjt폴더를 만든 후 위에서 했던 것과 동일하게 컴파일할 파일의 경로를 cd를 이용해 입력 후 폴더위치를 지정 후
npm을 이용해 프로젝트를 생성합니다.
$ cd sass_pjt
$ npm init -y위의 명령어를 실행하면 sass_pjt 폴더내에 package.json 파일이 생성됩니다.
해당 파일을 열어보면 아래와 같습니다.
JSON
{
name": "sass_pjt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}위의 내용에서 밑줄되어 있는 부분의 내용을 삭제하고 아래와 같이 입력해줍니다.
JSON
{
name": "sass_pjt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:sass": "sass style.scss style.css"
},
"keywords": [],
"author": "",
"license": "ISC"
}
지정해준 명령어를 입력해 간단하게 컴파일이 가능합니다.
$ npm run build:sass–watch (-w)
지금까지 설명한 방식의 컴파일은 파일이 변경될때마다 계속 컴파일 명령어를 입력해야하는 번거로움이 있습니다.
그럴때 우리는 ‘–watch(-w)’라는 옵션은 사용할 수 있는데, 해당 옵션은 명령어를 계속 입력하지 않아도 파일이 변경될 때마다 scss파일을 컴파일하여 css파일을 자동으로 업데이트 합니다.
$ sass [option] <input.scss> [output.css]
$ sass --watch style.scss style.css감시를 종료하려면 ctrl + c를 입력해 실행을 종료합니다.
–style (-s)
해당 옵션은 출력된 CSS스타일을 제어하며, Dart Sass는 두 가지 출력 스타일을 지원합니다.
expanded: 기본값으로 표준의 css파일이 생성된다.
$ sass --style=expanded style.scss style.cssSCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}compressed: 가능한 한 많은 추가 문자를 제거하고 전체 CSS를 한 줄에 작성하는 압축된 형식의 파일이 생성됩니다.
$ sass --style=compressed style.scss style.cssSCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}CSS
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}마치며
이번 장에선 Sass 사용을 위한 기본 개념과 설치에 대해 정리해보았습니다.
위에서 설명하는 설치방법외에도 다른 설치방법들이 있으나, 조금은 쉽게 접근 할 수 있는 것들로만 정리하였고,
이후 다른 방식의 추가 방법도 정리해보도록 할 생각입니다.
설치가 끝났으니 다음 장에서는 본격적으로 Sass의 문법들을 정리해 보려고 합니다.