CSS 작성과 관리를 효율적으로, Sass

Sass

Sass(Syntactically Awesome Style Sheets) 는 이름에서 처럼 Style Sheet인 CSS 작성 및 관리를 좀 더 효율적으로 진행할 수 있도록 해주는 전처리기(preprocessor) 입니다. 다른 스크립트 언어처럼 변수나 연산자와 같은 기능들을 사전에 구성해놓고 Sass가 이것을 변환하여 CSS 파일의 형태로 반환 해주게 됩니다.

SCSS
sass 문법만 볼때, CSS 와 문법간의 관계가 다른점이 많아 불편함이 있는데 이것을 개선하여 sass 의 기능에 CSS와 비슷한 형태로 작성할 수 있도록 구성되었습니다. 이후 코드들은 SCSS로 구성되있습니다.

• Sass 문법

  =transform($property)
   -webkit-transform: $property
   -ms-transform: $property
   transform: $property
  
   .box
   +transform(rotate(30deg))
  
   .box { @include transform(rotate(30deg)); }
  

• SCSS 문법

  @mixin transform($property) {
     -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
  }
  
  .box { @include transform(rotate(30deg)); }
  

Variables

특정값을 지정하여 재사용이 가능합니다.

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

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

Nesting

기존 CSS 계층 구조를 indent로 구분하도록 구성할 수 있습니다.

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

  li { display: inline-block; }
}

import

모듈화를 통해 세분화된 관리가 가능해집니다.

// _reset.scss
body
ul {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';

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

Partials
_fliename.scss 처럼 _로 시작되는 Sass 파일은 CSS 파일로 생성되지 않아야함을 의미합니다. 모듈화 및 관리를 유리하게 하며 @ipmort 문과 함께 사용됩니다.

Mixins

함수처럼 특정작업 그룹을 형성할 수 있습니다.

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

Extend/Inheritance

클래스처럼 기존의 설정들을 확장하여 재사용이 가능해집니다.

// 이부분은 확장되었기에 출력됩니다.
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// 이부분은 확장되지 않았기 때문에 출력되지 않습니다.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Operators

+, -, *, /의 사칙연산과 % 의 비율로 수치 값을 좀 더 유연하게 구성이 할 수 있습니다.

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}