[Sass] Syntactically Awesome Style Sheet

Sass는 CSS를 재미있게 만들어준다. 개발자에겐 접근하기 쉽겠지만 디자이너에겐 개발에 대한 고민을 하게 만드는 것같다. 하지만 현대적인 웹개발을 위하여 이제는 피할 수 없는 대세(?)인 Sass를 익혀야 한다.

1) 개요

  - 만들어진 배경에 대해서 이해하자 

  

  Sass: The Future of Stylesheets from chriseppstein

  - 여러 기능들의 본질은 간결하고 반복작업을 없애주는 웹 개발 흐름을(Web Development Workflow) 만들어준다

    + Nested Rules : 들여쓰기 가능 - 상위 개체에 대한 정의를 줄인다 

// CSS

table.hl {

  margin: 2em 0;

}

table.hl td.ln {

  text-align: right;

}

// SCSS (Sassy CSS)

table.hl {

  margin: 2em 0;

  td.ln {

    text-align: right;

  }

}

// SASS

table.hl

  margin: 2em 0

  td.ln

    text-align: right

    + Variables : 변수를 사용하여 반복적인 상수를 줄인다 ($를 사용)

// CSS

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

// SCSS

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color:

    darken($blue, 9%);

}

// SASS

$blue: #3bbfce

$margin: 16px

.content-navigation

  border-color: $blue

  color: darken($blue, 9%)

    + Mixins : 반복적인 입력을 함수화하는 것처럼 이용하여 코드를 줄인다 (@mixin @include 이용)

// CSS

#data {

  float: left;

  margin-left: 10px;

}

#data th {

  text-align: center;

  font-weight: bold;

}

#data td, #data th {

  padding: 2px;

}

// SCSS

@mixin table-base {

  th {

    text-align: center;

    font-weight: bold;

  }

  td, th {padding: 2px}

}

@mixin left($dist) {

  float: left;

  margin-left: $dist;

}

#data {

  @include left(10px);

  @include table-base;

}

// SASS

@mixin table-base

  th

    text-align: center

    font-weight: bold

  td, th

    padding: 2px

@mixin left($dist)

  float: left

  margin-left: $dist

#data

  @include left(10px)

  @include table-base

    + Selector Inheritance : 상속 개념으로 기존 코드를 줄인다 (@extend 사용)

// CSS

.error, .badError {

  border: 1px #f00;

  background: #fdd;

}

.error.intrusion,

.badError.intrusion {

  font-size: 1.3em;

  font-weight: bold;

}

.badError {

  border-width: 3px;

}

// SCSS

.error {

  border: 1px #f00;

  background: #fdd;

}

.error.intrusion {

  font-size: 1.3em;

  font-weight: bold;

}

.badError {

  @extend .error;

  border-width: 3px;

}

// SASS

.error

  border: 1px #f00

  background: #fdd

.error.intrusion

  font-size: 1.3em

  font-weight: bold

.badError

  @extend .error

  border-width: 3px

  - Sass는 두가지 문법으로 작성을 할 수 있다 

    + Scss : .scss 이고 {} 와 ; 가 존재, CSS3 의 확장자이다 (Sassy CSS)

    + Sass : .sass 이고 {} 와 ; 가 없고 대신 들여쓰기로 구분을 하여 간결함을 추구한다 (Haml 영향을 받음)

   

   Haml And Sass In 15 Minutes from Patrick Crowley

  - Sass는 색에 대한 Functions을 제공한다 (참조)

   예) 

   

2) 설치 및 사용법

  - gem install sass

  - 예제 코드 : dowon.scss

#dowon {

  width : 20%;

  height : 120px;

}

  - css 파일 변환하기 : sass --watch dowon.scss:dowon.css

  - Partials & Concatenation : @import 를 사용하고 분할된 파일의 컨벤션은 _partialFile.scss 즉 앞에 _ (underbar)를 붙여서 import 되는 파일을 따로 관리한다 그리고 컴파일을 하게 되면 지정한 하나의 파일 .css로 합쳐진다 

<참조>

  - Sass Tutorial

  - Sass References

  - Sass 온라인 테스트

  - Sass 개요 설명 - 한글

  - Sass 기능 설명 - 한글