Sass의 SCSS 구문 #

개요 #

Sass 3 버전에서 도입된 SCSS (Sassy CSS) 구문은 Sass의 "새로운 주요 구문"으로 소개되었으며 CSS의 구문을 기반으로 한다. 들여쓰기 문법을 사용하는 Sass의 기존 구문과 달리 CSS처럼 들여쓰기나 공백은 고려하지 않고 대괄호와 세미콜론을 사용하기 때문에 기존 CSS 사용자들에게 친숙함을 준다. 실제로 SCSS 구문은 CSS의 상위 집합으로 SCSS에 CSS의 모든 기능이 포함되어 있음을 의미한다.

SCSS 장점 #

SCSS is more expressive

    Sass가 들여 쓰기로 규칙과 속성을 작성하기 때문에 읽기 쉬운 장점이 있는 반면 SCSS 구문은 동일한 라인에 속성/값 쌍을 넣을 수 있어 보다 풍부한 표현이 가능하다는 평이 있다.
    즉, 호버(hover) 상태에 대한 글꼴의 색을 변경하거나 링크에 밑줄을 추가하는 것 등 Sass 구문에서는 여러 줄을 사용하지만 SCSS 구문은 몇 줄로 압축하는 코드가 가능하다.

SCSS encourages proper nesting of rules

SCSS는 규칙의 적절한 중첩을 통해 그룹화가 쉽다. 다만 너무 깊은 단계로 중첩될 경우 오히려 !important 를 남발하게 되므로 주의해야 한다.

Existing CSS tools often work with SCSS

기존 CSS도구가 SCSS와 더 잘 연계된다. 들여쓰기 된 Sass구문의 지원 여부는 다를 수 있지만 대부분의 에디터는 이미 CSS에 대한 지원 기능을 내장하고 있어서 SCSS와 잘 작동한다.

Integration with an existing CSS codebase is much easier

기존 CSS 코드베이스와의 통합이 훨씬 쉬워서 SCSS를 사용하면 기존 코드를 그대로 사용하면서 점진적으로 튜닝이 가능하다.

SCSS provides a much lower barrier to entry

    진입 장벽이 낮다.
    특히 명령 프롬프트보다는 마우스 사용에 익숙한 디자이너들이 선호하는 경향이 있다.

SCSS could become the next version of CSS

CSS의 다음 버전이 될 수 있다는 설이 있다.

SCSS 문법 #

Variable (변수) #

변수로 사용 가능한 형태는 숫자, 문자열, 폰트, 색상, null, lists 와 maps 가 있고 변수를 사용 할 떄는 $ 문자를 사용하면 된다.

활용 예 >

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

Nesting (중첩) #

활용 예 >

| SCSS 구문

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

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

| 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 (코드조각) #

언더스코어를 시작으로 파일을 생성할 경우 개별 CSS 파일로 컴파일되지 않고 내부적으로 @import 형태로 작동한다. CSS를 모듈화하고 유지관리를 쉽게하는 데 도움이 되는 기능이다.

활용 예 >

    scss/
    |
    |-- partials/             
    |   |-- _base.sass        # base
    |   |-- _buttons.scss     # buttons
    |   |-- _grids.scss       # grids
    |   |-- _reset.scss       # reset
    |   ...
    |
    `-- main.scss

Import (불러오기) #

스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용하는 기능으로 @import 지시자를 사용하여 지정한 scss 파일을 불러 올 수 있다.

활용 예 >

| SCSS 구문 1. base.scss

@import 'reset';

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

| SCSS 구문 2. _reset.scss

html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

| CSS 구문

html, body, ul, ol {
    margin: 0;
    padding: 0;
}

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

Mixins (믹스인) #

extend와 비슷하지만 인수를 받을 수 있다. @mixin 지시자를 사용해서 선언한 다음 @include 지시자를 사용해서 적용하면 된다.

활용 예 > 1. 기본

| SASS 구문

@mixin heading ($color, $size) {
    color: $color;
    font-size: $size;
}

h1 {
    @include heading(orange, 18px);
}

| CSS 구문

h1 {
    color: orange;
    font-size: 12px;
}

활용 예 > 2. 활용

| SASS 구문

@mixin media($queryString) {
    @media #{$queryString} {
        @content
    }
}

.container {
    width: 980px;
    @include media(‘(max-width: 767px’) {
        width: 100%;
    }
}

| CSS 구문

.container {
    width: 980px;
}
@media (max-width: 767px) {
    .container {
        width: 100%;
    }
}

Extend (상속) #

@extend 지시자를 사용해서 특정 선택자를 상속받을 수 있다.

활용 예 >

| SCSS 구문

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

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

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

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

| CSS 구문

.message, .success, .error, .warning {
    border: 1px solid #cccccc;
    padding: 10px;
    color: #333;
}

.success {
    border-color: green;
}

.error {
    border-color: red;
}

.warning {
    border-color: yellow;
}

Operators (연산) #

+, -, /, *, %, ==, != 와 같은 수학 연산자를 사용할 수 있다.

활용 예 >

| SCSS 구문

.container { width: 100%; }

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

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

| CSS 구문

.container {
    width: 100%;
}

article[role="main"] {
    float: left;
    width: 62.5%;
}

aside[role="complementary"] {
    float: right;
    width: 31.25%;
}

출처 및 참고

<http://sass-lang.com/>
<http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better>

Suggested Pages #

• 0.006 Sass/SCSS
• More suggestions...