Sublime Text 에 Sass 설치

Sass란 Ruby 기반의 CSS 확장언어이다.

(오역과 의역이 넘쳐납니다.)

Sass 홈페이지의 말을 인용한다면,

---

Pre-processing (전처리기)

CSS는 그 자체만으로 아주 흥미로울 수 있지만, 스타일시트는 점점 거대해지고, 더 복잡해지며, 유지가 어렵게 된다.

Sass는 전처리기를 도울 수 있는 위치에 있다. (전처리기:프로그램이 실행 되기 바로 전에 실행되는 프로세서)

Sass는 CSS에는 없는 기능들이자만, CSS를 더 재밌게 사용할 수 있게 만들어주는 변수, 중첩, 믹싱, 상속과 여러 실용적인 기능들을 사용할 수 있게 해준다.

일단 당신이 Sass를 만지작거리며 시작한다면, Sass 파일은 전처리되어 평상시처럼 CSS파일로 저장되고, 그것을 너의 웹 사이트에서 사용할 수 있다.

---

Variables (변수)

정보를 저장하기 위한 수단으로 변수를 생각한다면, 당신은 스타일시트 안에서 계속 재사용할 수 있길 바랄 것이다.

당신은 색상 값이나 다량의 폰트들 혹은 당신이 나중에라도 재사용하길 바라는 모든 CSS들을 저장할 수 있다.

Sass에서 변수를 만들기 위해서 $ 심볼을 사용한다. 예제:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass가 처리되었을 때, $font-stack 과 $primary-color 와  CSS 내에서 변수 값을 대신한 일반 CSS 산출물들에 대해 우리가 정의한 변수를 갖는다. 

(body에 있는 $font-stack;이 Sass에선 $font-stack이지만, CSS로 렌더링하면 Helvetica, san-serif; 로 변환되어 보여진다.)

이것은 브랜드 색상을 계속 사용하거나 사이트 내에서 일관되게 유지해야할 때, 극히 효과적일 수 있다.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

---

Nesting (포함관계)

당신이 HTML을 작성할 때 그것이 매우 명확하게 중첩 된 시각적 계층 구조를 가지고 있다는 것을 느꼈을 것이다.

반면에 CSS는 그렇지 않다. Sass는 CSS를 선택자들의 포함관계가 HTML의 시각적 계층 구조와 동일하도록 포함하게 할 것이다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

당신은 ul, li, a 태그들이 nav태그 안에 포함된 것을 볼 수 있다.

이것은 당신의 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;
}

---

Partials (부분)

당신은 다른 Sass 파일들로 include 할 수 있는 CSS의 snippet을 포함한 일부분의 Sass 파일들을 생성할 수 있다. 

이것은 당신의 CSS를 모듈화하고 유지보수를 쉽게하도록 돕는 아주 좋은 방법이다.

Partials(부분)는 _[언더스코어] + 이름 붙인 간단한 Sass 파일이다.

당신은 Partials(부분)파일의 이름을 _partial.scss 처럼 짓는게 좋다.

_[언더스코어]는 Sass가 그 파일이 오직 하나의 Partials(부분)파일인 것과 그것을 CSS파일 안에서 생성해야만한다는 것을 알게 한다.

(_[언더스코어]를 붙임으로서, 그 파일이 Partial이란 것과 CSS 안으로 include 해야한다는 것을 인식하게 함.)

Sass Partials는 @import 지시문과 함께 사용된다.

---

Import

CSS는 당신의 CSS코드를 더 작게 나누고, 부분적인 유지보수가 가능하게해주는 import 옵션을 갖고있다.

CSS 안에서 매번 @import 를 사용하기때문에, HTTP 요청이 늘어난다.

Sass는 현재 CSS의 최상단을 기반으로 @import 하지만 

HTTP 요청을 요구하는 대신에 Sass는 당신이 원하거나 합치길