SASS

SASS ( CSS with Superuser )

CSS에 프로그래밍 언어를 합친 것 같은 형태. CSS가 프로그래밍 언어처럼 동작하게 해준다.

변수를 사용할 수도 있고, 그 변수를 스타일을 지정할 때 사용할 수 있다.

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

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

또한 nesting이라고 해서, ul > li{} 형식으로 썻던 것을 프로그래밍 언어처럼 작성할 수 있다.

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

  li { display: inline-block; }

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

이렇듯 다양한 방식으로 CSS를 프로그래밍 언어처럼 편리하게 다룰 수 있게 해주는 것이 SASS이다.

SASS 사이트