[Chapter 01] Sass

Sass Started

Sass를 사용하기 위한 환경 셋팅이 준비되었다면 Sass를 사용해 보기

Sass 파일의 확장자는 .scss 이며, 이 확장자 파일은 나중에 .css로 변환되어  실질적으로 서비스에 반영되는 .css 파일로 사용되어 지며 Sass는 마크업에서만 사용되는 언어입니다. 유관부서에 공유되거나 실서비스에 뿌려지는 것이 아니기 때문에 파일을 여러개로 나눠서 import해도 되고, 변수명 같은 것도 축약어를 사용하지 않아도 됩니다.

※ CODEPEN 에서 VIEW COMPILED 를 클릭하여 컴파일 결과를 확인해보세요!

변수(Variables) 기본값 설정 : $ , !default(디폴트 플래그)

 ㆍ $변수명 : 속성값;

 ㆍ $변수명 : 속성값 !default;

Scss파일에서 위 코드를 작성하여 css 로 변환을 하면 , Sass는 자동으로 자신이 선언한 변수에 대한 값으로  변환,출력하게 됩니다. 

// Sass 변수는 -, _ 를 구분하지 않고 같은 데이터로 인식합니다.
$display-ib: inline-block;
$font_samll: 12px;

.notice {
  display: $display-ib;
  position:absolute;
  left:5px;
  font-size: $font-samll;
}


$set-width: 500px;
// $set-width 값이 설정된 경우 기본값(!default)보다 우선 적용되고
// $set-width 값이 별도로 설정되지 않을 경우는 기본값(!default)이 설정됩니다.
$set-width: 800px !default;
$set-color: #ae96ff;

#demo {
  width: $set-width; // 500px 이 적용
  color: $set-color;
}

$set-height: 200px !default;
$set-color: #ae96ff;

#demo2 {
  width: $set-height; // 기본값인 200px 적용
  color: $set-color;
}

See the Pen xwWBxe by jaeheekim (@jaehee) on CodePen.

Comments: /* */ 및 //

sass는 css표준 멀티라인 주석과 함께 js의 한줄 주석과 같은 주석인 // 을 지원하고 있습니다. 

대신에 멀티라인 주석은 css에 그대로 컴파일되어 출력되지만 // 싱글라인 주석내용은 컴파일되지 않습니다.

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. 
 */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

See the Pen SASS 주석 컴파일 테스트 by jaeheekim (@jaehee) on CodePen.

Interactive Shell(대화형 쉘)

terminal(터미널)이나 cmd 환경에서 sass -i 를 작성하면 sassScript 표현식의 문법 코드를 작성하여 결과를 출력할 수가 있습니다.

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee

Nested Syntax(중첩 문법) 작성하기

일반적으로 css 마크업은 아래와 같이 작성을 합니다.

.info{background:#fff}
.info:before{display:block;content:''}
.info .tit{font-size:16px}
.info .lnk{display:block;margin-top:9px}

CSS 의 케스케이딩문법은 .info라는 클래스 안에 있는 .tit에는 이런 속성을 주고, 또 .info라는 클래스 안에 .lnk에는 해당 속성을 주면서 상속을 구현하고 있습니다.

하지만 sass에서는 중첩기능(상속)을  아래와 같이 .info를 한번만 쓰고 적용가능합니다.

.info {
    background: #fff;
    &:before {
      display: block;
      content: '';
    }
    .tit {
      font-size: 16px;
    }
    .lnk {
      display: block;
      margin-top: 9px;
    }
}

See the Pen sass 상속 by jaeheekim (@jaehee) on CodePen.

이렇게 sass는 중첩(상속)된 내용들에 대해서 자동으로 최상단에 선언해 준 클래스명을 적용해줍니다. 

[ex] .info .tit, .info .lnk { }

Referencing Parent Selectors : & (부모 참조선택자)

위 의 코드를 유심히 봤다면, &(엠퍼샌드) 특수기호를 봤을 것입니다.

이 특수기호인 &(엠퍼샌드)는 Referencing Parent Selectors 로써 부모 참조 선택자이다.

& 이 기호는 부모를 참조하는 선택자로써 멀티클래스(복합선택자)를 사용할 때 유용하게 사용할 수가 있다.

보통 UI 개발자는 멀티클래스(복합선택자)를 아래와 같이 작성할 수 있습니다.

/* 일반적인 멀티클래스 css 사용방법 */
.zone {
    background: #ccc;
}

.zone.info {
    font-size: 16px;
}

body.notice .zone {
    font-size: 30px;
}


/* Sass의 &(엠퍼샌드)를 이용한 멀티클래스 적용방식 */
.zone {
    background: #fff;
    &.info {
      font-size: 16px;
    }
    body.notice & {
      font-size: 30px;
    }
}

See the Pen sass 부모참조선택자 by jaeheekim (@jaehee) on CodePen.

body가 .notice 라는 클래스를 가질 때 .info클래스의 속성값이 변하는 것에 대해 body.notice { }; 으로 스타일을 새롭게 작성하는 것이 아니라 작성중인 스타일내에서 body.notice 뒤로 &선택자만 활용하여 선언해주면 css에서는 부모선택자를 참조하여 예제와 같은 결과값을 출력해주게 됩니다.

연관된 스타일을 여러 줄을 만드는 것이 아닌, 하나로 그룹핑 할 수 있다는 장점을 가지고 있습니다.

그리고 믹스인을 이용하여 부모 선택자가 존재하는지의 여부를 감지할 수도 있습니다.

@mixin does-parent-exist {
    @if & {
      &:hover {
        color: red;
      }
    }
    @else {
      a {
        color: red;
      }
    }
}

// 부모선택자가 있다면...
.demo {
  @include does-parent-exist;
}

// 부모선택자가 없다면...
@include does-parent-exist;

See the Pen sass mixin 활용 by jaeheekim (@jaehee) on CodePen.

위 코드는 부모선택자가 없다면 &의 값은 null을 반환하여 @else가 실행될 것이고 부모선택자가 있다면 @if의 hover를 실행하게 될 것입니다.

Mixins Syntax 사용하기

JS의 함수처럼 @mixin으로 모듈을 설정한 후, 이를 @include 할 수 있어 재사용할 수 있다.

ㆍ 선언 – @mixin mixin명 { }

ㆍ 호출 – @include mixin명 { }

일반적으로 UI 개발자는 반복되는 스타일이나 자주 사용하는 코드들을 클래스로 만들어 놓고 쓰는 경우가 많이 있습니다.  그래서 해당 클래스를 추가하기도 하지만 그렇지 못 할 경우에는 반복되는 코드를다시 재사용하기 위해 copy&paste를 하곤 합니다.

이러한 번거로움을 줄이기 위해 Sass에서는 Mixin 이란 기능을 제공해 주고 있습니다.

// 변수 선언 (참고로 sass파일에서는 자바스크립트와 같이 한줄 주석처리를 // 와 동등하게 사용 가능하다
// 주석처리 한 내용은 변환된 css파일에서는 css 주석처리방식인 /* */ 으로 변환,출력된다.
$overflow_hid:hidden;

// mixin 선언
@mixin ellipsis {
    overflow: $overflow_hid;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@mixin hide_txt {
    display: inline-block;
    overflow: $overflow_hid;
    line-height: 9999px;
    vertical-align: top;
}

.title {
  // mixin 호출
  @include ellipsis;
  color: #1b1f2a;
}

.sub_tit {
    // mixin 호출
    @include ellipsis;
}

.btn {
    // mixin 호출
    @include hide_txt;
    width: 12px;
    height: 8px;
}

.ico {
    width: 4px;
    height: 4px;
    // mixin 호출
    @include hide_txt;
}

See the Pen Sass mixin by jaeheekim (@jaehee) on CodePen.

위의 코드를 보면, mixin기능을 사용하여 말줄임과 숨김텍스트 기능을 상단에 선언해놓고, 실제로 적용되는 style 코드에서는 include로 mixin명만 호출하였습니다. 

이렇게 하면, Sass는 상단에 선언된 속성들을 불러와  css로 출력을 해줘서 반복되는 코드를 여러번 작성하는 번거로움을 덜어줄 수가 있습니다. 

그리고 .btn과 .ico를 비교해보시면 서로 mixin을 호출한 위치에서 출력을 해주는 것을 알 수 있습니다.

또한 mixin 은 특정 속성값을 인자로 지정하여 여러가지 스타일을 혼합하여 사용할 수가 있습니다.

Mixin 인자를 사용한 작성방법

선언 – @mixin mixin명(변수명) { }

호출 – @include mixin명(변수명) { }

- 인자값은 하나만 넣을수도 있고, (,)쉼표구분으로 여러개를 넣을 수도 있습니다.

// mixin에 인자값 설정
@mixin title_style($size, $color) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: $size; // 인자값 사용할 곳
    color: $color; // 인자값 사용할 곳
}

h1 {
    // minin  호출하는 동시에 사용할 인자값 설정 (자바스크립트 함수호출과 같음)
    @include title_style(16px, #000)
}

See the Pen sass mixin 인자값사용 by jaeheekim (@jaehee) on CodePen.

mixin을 선언할 때 괄호안에 변수로 인자를 지정하고, 적용되는 코드에서 필요한 값을 넣어주면  sass는 전달받은 인자값으로 css를 호출해주게 됩니다.

이렇게하면, 동일한 스타일의 하나의 값 또는 몇개의 다른 값을 가지는 것에 대해서 좀 더 편리하게 작성할 수 있습니다.

또, 인자에 기본값을 지정할 수도 있습니다 . *기본값은 css처럼 (:)콜론으로 정의합니다.

@mixin title_style($size, $color:#080){
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:$size;
  color:$color;
}
h1{
  // $color 인자없이 호출 할 경우 기본값으로 컴파일
  @include title_style(16px)
}
h2{
  // 인자값을 넘겨줬으므로 인자값으로 컴파일
  @include title_style(14px, #333)
}

See the Pen sass mixin 활용1 by jaeheekim (@jaehee) on CodePen.

위의 코드가 어떻게 변환될 지 미루어 짐작할 수가 있습니다.

인자값을 특별히 지정해 주지 않을 경우에는 기본값으로 변환,출력될 것이고 인자값을 넣어 줄 시에는 해당 인자값으로 변환, 출력될 것입니다.

mixin에 기본값이 없는 인자를 설정해 줄 경우에 mixin을 호출하는 곳에서 인자값을 설정해 주지 않으면 에러가 나므로 주의를 기울여야 한다.

mixin은 특히 css3에서 브라우저별로 다른 벤더 프리픽스를 입력할 때 유용한데 그 예제는http://sasslang.com/guide#topic-6에서 확인해 보자.

Extend 문법 작성하기

 @extend .클래스명; 

 @extend %클래스명;

mixin과 같이 중복되는 스타일에서 일부 속성값만 다른 클래스에 대해 좀 더 쉽게 작성하는 방법으로 extend 기능을 알아보자.

.ico{
    display:block;
}

// %인 Placeholeder Selector 사용
%bg{
    background:url(img/bg.gif) no-repeat;
}

.ico_new{
    @extend .ico;
    @extend %bg;
    background:red;
}
.ico_qna{
    @extend .ico;
    @extend %bg;
    background:black;
}

See the Pen sass extend by jaeheekim (@jaehee) on CodePen.

 위의 css 코드를 분석해 보면 동일한 속성값을 가진 클래스들이 background 색상만 다른 경우를 위해 작성한 것입니다.

이것을 Sass의 extend를 이용하면 공통되는 속성값에 클래스를 (,)콤마를 구분으로 묶어서 출력해주고 다른 속성값은 따로 출력해 주는 것을 확인할 수 있습니다.

<span class=”ico ico_new”> → <span class=”ico_new”>

이는 위의 span class인 ico ico_new를 두 번 써줘야 하는 등의 번거러움을 줄일 수가 있다.

Placeholder Selector : %

그렇다면 위의 예제 코드중에 %는 무엇일까?

%는 Placeholder selector라고 불리는 특별한 타입을 지원하는데  html 마크업을 할때 placeholder와 비슷한 속성이고 @extend 지시자와 함께 사용됩니다.

placeholder는 shadow dom element로써 숨겨진 DOM인데 이와 유사한  Sass에서의 %는 숨겨진 선택자로써 CSS상에서는 노출되지 않는 선택자입니다.

다시 말해서, %는  css에서 Id, class를 사용하여 선택자를 생성하듯이 %bg와 같이 선택자를 생성하는 것이다.

다만  css에서는 선택자를 보여주지 않기 때문에 숨겨진 선택자라고 이해하면 될 듯 합니다. 혹은 스크립트에 익숙한 분이라면 변수에 객체리터럴 방식으로 참조하여 사용하는 것처럼 하나의 모듈을 숨겨놓고 관리,재사용하는 것이라고 이해해도 될 것 같습니다.

(위의 코드에서 %bg인 선택자는 변환된 css파일에는 나타나지 않고 css의 프로퍼티와 값만 출력되는 것을 확인할 수 있다.)

#context a%extreme {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}

.notice {
    @extend %extreme;
}

See the Pen sass extend 2 by jaeheekim (@jaehee) on CodePen.

Mixin Vs Extend

위에서 mixin과 extend에 대해 간략히 알아보았습니다.

충실히 내용을 이해했다면 한가지의 물음표가 생길지도 모르겠습니다. 

mixin도 공통된 스타일을 반영해 주는 것이고 extend도 공통된 스타일을 반영해 주는 것으로 사용되고 있기 때문에 대체 무슨 차이점이 있을까라는 의구심이 생길지도 모르겠습니다.

그렇다면 차이점이 무엇일까?! 

mixin은 공통 적용된 스타일을 선택자마다 제각각 넣어줄 수 있고 extend 는 정해진 공통 모듈을 같은 곳에서 사용하는 것입니다.

@extend : 정해진 공통 스타일(모듈)을 같은 곳에서 나눠쓰는 것(같은 곳에서 사용하는 것)

@mixin :  함수와 같은 재사용성 및 파라미터를 사용하면서 각각의 정해진 곳에서 사용한다는 것 

[sass]

h1{
  @include title_style(16px)
}
h2{
  @include title_style(14px, #333)
}

[컴파일 css]

h1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #080;
}
h2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #333;
}

extend는 선택자들을 (,)콤마로 구분하여 선택자 클래스들을 하나로 묶어서 한번만 넣어줄 것이냐.. 인 것입니다.

물론 mixin 은 파라미터를 받아서 좀 더 유연하게 사용가능하긴 합니다.

[sass]

.ico{
  display:block;
}

%bg {
  background:url(img/bg.gif) no-repeat;
}

.ico_new{
  @extend .ico;
  @extend %bg;
  background:red;
}
.ico_qna{
  @extend .ico;
  @extend %bg;
  background:black;
}

[컴파일 css]

.ico, .ico_new, .ico_qna { /* 선택자들을 콤마(,)로 구분하여 공통 스타일을 적용 */
  display: block;
}
.ico_new, .ico_qna {
  background: url(img/bg.gif) no-repeat;
}

때에 따라서는 mixin 안에 extend를 조합하여 사용할 수도 있습니다.

Sass 스타일 모듈 관리

스타일을 한 덩어리로 관리하는 것보다, 카테고리를 분류(조직화)하여 작성/관리하는 것이 효율적입니다.

.
└── sass
├── common
│   ├── _common.sass
│   ├── _print.sass
│   └── part
│       ├── _clearfix.sass
│       └── _defaults.sass
├── page
│   ├── _footer.scss
│   ├── _header.scss
│   └── _page.scss
└── style.scss

[Sass  설치없이 스터디 등의 목적으로 할 경우 http://sassmeister.com/ 

Jaehee's e-room