Sass
#
Find similar titles
- 최초 작성자
-
최근 업데이트
bjpark@insilicogen.com
Structured data
- Category
- Etc
Table of Contents
Sass란? #
“Sass는 문서의 구조를 깔끔하고 구조적으로 기술하는 데 사용하는 기술인 css의 상위에 있는 메타언어로, 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 일종의 CSS 전처리기(pre-processor)이다.” 따라서, 우리가 사용하는 일반 언어처럼 재사용성을 높이고 활용성을 높여주는 역할을 한다.
CSS 컴파일러(Compiler) #
Sass 포맷으로 만들어진 파일을 CSS로 변환해주는 도구
Sass/SCSS 컴파일하는 방법 #
- 컴파일하고 싶을 때 수동으로 시행하는 방법
- 지정한 디렉토리를 Sass가 항시 감사하여 파일이 갱신되는 순간에 자동으로 컴파일하는 방법
Sass/SCSS 자동 컴파일 프레임워크들 #
- CodeKit (Paid)
- Compass.app (Paid, Open Source)
- Hammer (Paid)
- Koala (Open Source)
- LiveReload (Paid, Open Source)
- Mixture (Free)
- Prepros (Paid)
- Scout (Open Source)
Sass/SCSS 설치 #
Linux #
- Sass는 Ruby라는 프로그래밍 언어를 기반으로 하므로 Ruby 를 설치한다.
sudo apt-get install ruby2.2.2(x64) - Sass를 설치한다.
sudo gem install sass - Compass를 설치한다. (선택)
sudo gem install compass
Windows #
- Sass는 Ruby라는 프로그래밍 언어를 기반으로 하므로 Ruby를 설치한다.
- Sass를 설치한다.
gem install sass - Compass를 설치한다. (선택)
gem install compass
Mac #
- [Ruby]가 기본으로 설치되어 있다. 그러나 Ruby가 설치되어 있지 않다면 별도 설치를 진행한다.
- Sass를 설치한다.
sudo gem install sass - Compass를 설치한다. (선택)
sudo gem install compass
기본문법 #
Sass와 Sass/SCSS 문법의 차이 #
-
Sass (indented Syntax 들여쓰기 문법)
- 이전 버전으로 Sass 확장자는 Ruby의 영향을 받은 간결한 문법을 사용한다.
- CSS 문법에서 반복 사용되는 {}, ; 등을 사용하지 않는다.
- 변수명에 ! 를, 속성과 값의 구분자인 특수기호로 = 를 사용한다.
-
SCSS (CSS와 같은 문법)
- SS3에 맞춰서 업데이트 버전으로 CSS Syntax와 비슷하면서 유연한 문법 등을 제공한다.
- 변수명에 $를, 속성과 값의 구분자인 특수기호로 :(콜론)을 사용한다.
변수 #
Sass는 CSS에서 지원하지 못하는 변수를 지원해준다.
변수로 사용할 수 있는 형태는 숫자, 문자열, 폰트, 색상, null 등이 있고 변수를 사용할 때는 $ 문자를 앞에 붙여주면 된다.
변수의 범위는 변수를 특정 선택자에서 선언하면 해당 선택자에게서만 접근이 가능하지만 !global 플래그를 사용하면 전역변수로 설정할 수 있다. !defaul 플래그(mixin 작성 시 유용)는 해당 변수가 설정되지 않았거나 값이 null일 경우 값을 설정한다.
SCSS 예]
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
컴파일 후 CSS]
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
