SASS #
Find similar titles

Structured data

Category: Etc

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와 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;
}

SASS #
Find similar titles

Structured data

Table of Contents

Sass란? #

CSS 컴파일러(Compiler) #

Sass/SCSS 컴파일하는 방법 #

Sass/SCSS 자동 컴파일 프레임워크들 #

Sass/SCSS 설치 #

Linux #

Windows #

Mac #

기본문법 #

Sass와 SCSS 문법의 차이 #

변수 #

중첩 규칙 #

계산과 함수 #

선택자 상속 #

주석 #

믹스인(Mixin) #

임포트 (import) #

문자열 #

제어문 #

이스케이프 #

자바스크립트 실행 #

Suggested Pages #