Sass(CSS Preprocessor) 기초

Posted by in Research

Sass란?

책에서는 이렇게 설명합니다. “Sass는 css전처리기로 .css 파일 중간에 위치하는 하나의 계층입니다. Sass는 보다 간결하고 격식을 갖춘 css 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다.” 대체 이게 뭔소리인가… 혼란스럽습니다.

좀 더 풀어서 접근해보면.. “Sass는 css를 만들어주는 언어로 자바스크립트처럼 특정 속성(ex. color, margin, width … )의 값(ex. #000, 3px, 420px … )을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 기능을 가졌습니다.”

사실.. 이런 이론적인 설명만으로는 전혀 감이 오지 않습니다. 그러나 앞으로 접하게 될 예제들을 통해 “아! 이런녀석이구나~” 라고 감을 잡으실 수 있을겁니다.

Sass 설치!

Sass는 Ruby라는 프로그래밍 언어로 만들어졌습니다. 다시 말하면, 내 PC에서 Ruby라는 언어가 동작해야 Sass를 사용할 수 있다는 말이 됩니다.

그래서 일단은 Ruby를 설치합니다! Mac OS는 Ruby가 기본적으로 설치가 되어 있어서 따로 번거롭게 설치할 필요가 없습니다. 그래서 Ruby 설치가 필요한 Windows 기준으로 설명드립니다.
http://rubyinstaller.org/downloads/

위 URL을 들어가보시면 다운로드 링크가 여러개 있는데.. 다 skip하시고 아래와 같이 RubyInstallers의 맨 위에 있는 링크를 클릭합니다!

설치를 진행하다보면.. 아래와 같은 화면이 나옵니다.
sass02

이 때, Add Ruby executables to your PATH를 체크합니다. 두번째 내용이 체크되어야 PATH설정을 따로 할 필요없이 Ruby가 정상 설치됩니다.

이렇게 Install이 끝나면, Ruby가 제대로 설치되었는지는 cmd창에서 아래 명령어로 간단하게 확인할 수 있습니다.

Ruby가 설치되면 아래의 명령어로 sass를 설치합니다.

* gem은 Ruby에서 지원하는 패키지시스템으로, 명령어를 사용해 필요한 프로그램을 다운ㆍ설치합니다.

이 때, 일부 PC에서는 아래와 같은 오류가 발생할 수 있는데,
scss3

를 입력하고 다시 “gem install sass” 명령어를 입력하면 정상적으로 설치가 완료됩니다.

Sass 써봅시다!

Sass사용을 위한 모든 준비가 끝났습니다. 이제 사용해보면 됩니다.
먼저, Sass 파일의 확장자는 .scss입니다.
이 파일은 나중에 .css 변환되어 서비스에 실질적으로 적용되는 파일은 .css 파일이 됩니다.

* Sass는 마크업에서만 사용되는 언어입니다.
  유관부서에 공유되거나 실서비스에 뿌려지는 것이 아니기 때문에 파일을 여러개로 나눠서 import해도 되고, 변수명 같은 것도 축약어를 사용하지 않아도 됩니다.

.scss 파일을 작성 후, cmd창에서 아래의 명령어를 입력하면 css 파일로 변환해줍니다.

[변수 Variables]

* 작성방법 – $변수명 : 속성값;

SCSS CSS
$display-default:block;
$color-point:#080;
.lnk{
display:$display-default;
position:absolute;
left:5px;
color:$color-point;
}
.lnk {
display: block;
position: absolute;
left: 5px;
color: #080;
}

이렇게 작성한 후 css로 변환하면, sass는 자동으로 내가 선언한 변수가 가진 값을 출력하게 됩니다.예제를 보면, .lnk내에 display 속성값과 color 속성값을 위에 선언된 변수명으로 넣었습니다.

[중첩 Nesting

마크업을 하다보면 이런 코드 많이 접해보셨을겁니다.

.info라는 클래스 안에 있는 .tit에는 이런 속성을 주고, 또 .info라는 클래스 안에 .lnk에는 저런 속성을 주고 …
.info라는 클래스를 쓰고 또 쓰고 하는 그런 상황!
sass를 사용하면 중첩기능을 통해 .info를 한번만 쓰고 적용할 수 있습니다.

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

그리고 적용이 필요한 코드들은 .클래스명{속성:값}; 으로 .info내에 선언해주었습니다.예제를 보면, .info는 한 번 밖에 쓰이지 않았습니다. 이렇게하면, sass는 중첩된 내용들에 대해서 알아서 최상단에 선언해 준 클래스명을 적용해줍니다.(ex. .info .tit, .info .lnk…)

그런데, 예제를 보다보니 이상한 애가 하나 있습니다.
& ← 너 누구니? 너 이름이 모니?
안녕하세요? 저는 Referencing Parent Selectors(부모참조선택자) 라고 해요!!
&(부모참조선택자)의 등장입니다. sass에서는 &기호로 부모 선택자를 참조할 수 있습니다.

위의 예제에서는 .info가 부모 선택자가 됩니다. 이게 왜 필요하냐..!라고 하시면 아래의 예제를 볼까요?

SCSS CSS
.info{
background:#fff;
      &.tit{
font-size:16px;
}
.tit{
font-size:11px;
}
}
.info {
background: #fff;
}
.info.tit {
font-size: 16px;
}
.info .tit {
font-size: 11px;
}

예제를 보면, &선택자를 사용한 .tit클래스는 .info의 복합선택자 속성값이 적용되지만, 그렇지 않은 .tit클래스는 .info 하위에 있는 자식선택자로 속성값이 적용됩니다. &선택자의 사용여부에 따라 부모 친구선택자(복합선택자)가 되느냐, 부모를 따르는 자식선택자가 되느냐로 구분할 수 있다고 생각하면 될 것 같네요. 그리고 아래처럼도 사용할 수 있습니다.

SCSS CSS
.info{
background:#fff;
&.tit{
font-size:16px;
}
body.test &{
font-size:30px;
}
}
.info {
background: #fff;
}
.info.tit {
font-size: 16px;
}
body.test .info {
font-size: 30px;
}

body가 .test라는 클래스를 가질 때 .info클래스의 속성값이 변하는 것에 대해 body.test{};으로 스타일을 새롭게 작성하는 것이 아니라 작성중인 스타일내에서 body.test뒤로 &선택자만 활용하여 선언해주면 CSS에서는 부모선택자를 참조하여 예제와 같은 결과값을 출력해주게 됩니다. 연관된 스타일을 여러 줄을 만드는 것이 아닌, 하나로 그룹핑 할 수 있다는 장점이 있습니다^^

[불러오기 Import]

Sass도 css처럼 import가 가능합니다. 다른 점은, css는 import된 각각의 .css파일의 로딩을 http에 요청해야한다면, sass는 여러개의 .scss파일을 import해도 최종적으로는 하나의 .css로 변환해주기 때문에 http에 요청을 여러번 보낼 필요가 없습니다.

* 작성방법 – @import “파일명.scss”; or @import “파일명”;
http://sass-lang.com에서는 .scss 파일을 import할 경우, .scss 확장자를 써주지 않아도 된다고 설명합니다.

SCSS (test.scss) @import SCSS (test2.scss) CSS
@import ‘test2.scss’; //@import ‘test2’;
$color-main:#333;
.test{
font-color:$color-main;
}
.test2{
font-color:$color-test;
}
 $color-test:#000; .test{
font-color:#333;
}
.test2{
font-color:#000;
}

* sass에서는 // 한 줄 주석이 가능합니다!

   한 줄짜리 주석은 출력된 .css 파일에서는 삭제되기 때문에 자유롭게 쓸 수 있습니다!

예제를 보면, 변수가 두 번($color-main, $color-test) 사용된 것을 보실 수 있습니다. 첫번째 test.scss파일을 보면 $color-test가 변수 선언되어 있지 않습니다. 단지 $color-main 변수만 선언 되었을 뿐.. 그런데, 이 파일에 import된 test2.scss 파일을 보니 $color-test라는 변수가 있네요~ 그러면 sass는 test.scss파일이 css로 출력될 때 import된 파일의 내용도 함께 반영해서 출력해주게 됩니다.
CSS 결과물에 test2.scss에 반영된 $color-test 변수의 속성값이 적용된 것을 보면 알 수 있듯이…!

[Mixin]

아래와 같은 코드를 보신적이 있을겁니다.

반복되는 말줄임 적용 스타일을 클래스로 만들어놓고 필요한 위치에서 클래스를 추가로 넣어주거나, background-image가 들어가는 각각의 요소에 글자를 숨기기 위해 일부 동일한 속성을 반복해서 써야하는 번거로움.

sass에서는 mixin기능을 이용하여 이런 번거로움을 줄일 수 있도록 해줍니다.

* 작성방법
선언 – @mixin mixin명{}
호출 – @include mixin명{}

SCSS CSS
$overflow_hid:hidden;
@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{
      @include ellipsis;
color:#1b1f2a;
}
.sub_tit{
      @include ellipsis;
}
.btn{
@include hide_txt;
width:12px;
height:8px;
}
.ico{
width:4px;
height:4px;
@include hide_txt;
}
.title {
overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

color: #1b1f2a;
}
.sub_tit {
overflow: hidden;
white-space: nowrap;
      text-overflow: ellipsis;

}
.btn {
      display: inline-block;
      overflow: hidden;
      line-height: 9999px;
      vertical-align: top;

width: 12px;
height: 8px;
}
.ico {
width: 4px;
height: 4px;
display: inline-block;
      overflow: hidden;
      line-height: 9999px;
      vertical-align: top;

}

예제를 보면, mixin기능을 사용하여 말줄임과 숨김텍스트 기능을 상단에 선언해놓고, 실제로 적용되는 style 코드에서는 include로 mixin명만 호출하였습니다. 이렇게 하면, Sass는 상단에 선언된 속성들을 불러와 css로 출력을 해줘서 반복되는 코드를 여러번 작성하는 번거로움을 덜어줍니다! 그리고 .btn과 .ico를 비교해보시면 서로 mixin을 호출한 위치에서 출력을 해주는 것을 알 수 있습니다~

또한 mixin은 특정 속성값을 인자로 지정하여 여러가지의 스타일을 만들 수도 있습니다!

* 작성방법
선언 – @mixin mixin명(변수명){}
호출 – @include mixin명(변수명){}

SCSS CSS
@mixin title_style($size, $color){
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:$size;
color:$color;
}
h1{
@include title_style(16px, #000)
}
h1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
color: #000;
}

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

mixin을 선언할 때 괄호안에 변수로 인자를 지정하고, 적용되는 코드에서 필요한 값을 넣어주면 sass는 전달받은 인자값으로 css를 호출해주게 됩니다!
이렇게하면, 동일한 스타일의 하나의 값 또는 몇개의 다른 값을 가지는 것에 대해서 좀 더 편리하게 작성할 수 있습니다.

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

SCSS CSS
@mixin title_style($size, $color:#080){
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:$size;
color:$color;
}
h1{
@include title_style(16px)
}
h2{
@include title_style(14px, #333)
}
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;
}

이렇게 하면 인자값을 특별히 지정해주지 않을 경우, 기본값을 출력하게 됩니다.
주의! 기본값이 없는 인자에 대해 값을 넣어주지 않으면 에러가 납니다.

mixin은 특히 css3에서 브라우저별로 다른 벤더 프리픽스를 입력할 때 좋습니다. 그 예제는 http://sass-lang.com/guide#topic-6에서 확인해보시면 될 것 같습니다^^

[확장 Extend]

mixin과 같이 중복되는 스타일에서 일부 속성값만 다른 클래스에 대해 좀 더 쉽게 작성하는 방법으로 extend 기능도 있습니다!

* 작성방법 – @extend .클래스명; or @extend %클래스명;

SCSS CSS
.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;
}
.ico, .ico_new, .ico_qna {
display: block;
}
.ico_new, .ico_qna {
background: url(img/bg.gif) no-repeat;
}
.ico_new {
background: red;
}
.ico_qna {
background: black;
}

예제를 보면, 동일한 속성값을 가진 클래스들이 background 색상만 다를 경우, extend를 이용하면 공통되는 속성값에 대한 클래스를 (,)콤마구분으로 묶어서 출력해주고, 다른 속성값에 대해서만 따로 출력해주는 것을 볼 수 있습니다. 이렇게하면, html에서 클래스를 두 번 써야하는 번거로움을 줄일 수가 있습니다. 아래처럼요!
<span class=”ico ico_new”> → <span class=”ico_new”>

그런데, 예제를 보니 이상한 애가 또 나타났습니다.
% ← 넌 또 누구니?
아! 안녕하세요~ 전 Placeholder Selectors라고 해요!

%(플레이스홀더 셀렉터)의 등장입니다. extend를 사용할 때 ID나 class선택자처럼 %로 선택자를 만들 수 있습니다.

단, %선택자는 css상에서는 출력되지 않습니다. 투명선택자.. 같은거라고 보시면 될 듯?!
그래서 예제를 보시면 .ico와는 다르게 %bg는 css코드상에 출력되지 않습니다.! 기능은 충실히 하지만 보이지는 않는..!!

[Mixin vs Extend]

정리를 하다보니, mixin도 공통된 스타일을 반영할 때 쓰고, extend도 공통된 스타일을 쓰는데… 뭐가 다른거지? 결국엔 공통된 거 써주는거잖아?! 라는 의문이 듭니다. 코드를 살펴보니 차이는 간단합니다. 공통된 속성을 클래스마다 넣어줄 것이냐.. [mixin], (,)콤마 선택자로 클래스들을 하나로 묶어서 한번만 넣어줄 것이냐.. [extend] 입니다. 결국에는 작업자의 스타일에 따라.. 작업상황에 따라.. mixin을 쓸 지 extend를 쓸 지를 결정하는거라고 볼 수 있을 것 같네요~ 때에 따라서는 mixin 안에 extend를 조합할 수도 있습니다^^

[CSS 출력 style지정]

Sass 기능에 대한 내용들을 잠깐씩 접해보았습니다. 이제 이런 기능들을 사용한 .scss 파일을 .css 파일로 출력해주기만 하면 되는데요~ Sass 명령어로 CSS의 출력 스타일을 지정해 줄 수 있습니다!

* 명령어 작성
sass –style style종류 (작성된)파일명.scss (변환될)파일명.css
ex) sass –style compact test.scss test.css

* style 종류
중첩(nested) : sass의 기본스타일로 html문서처럼 부모요소에 대한 하위요소는 들여쓰기 되는 형식입니다.
확장(expanded) : 일반적인 css 스타일로 선택자에 따라 속성이 들여쓰기 되는 형식입니다.
축약(compact) : 업무에서 가장 많이 사용되는 스타일로 한줄씩 출력되는 스타일입니다.

각 style에 따른 출력화면은 아래와 같습니다.

중첩(nested) 확장(expanded)  축약(compact)<
.info {
background: #fff; }
info .tit {
font-size: 11px; }
.test2 {
font-color: #000; }
.info {
background: #fff;
}
.info .tit {
font-size: 11px;
}
.test2 {
font-color: #000;
}
.info { background: #fff; }
.info .tit { font-size: 11px; }
.test2 { font-color: #000; }

그리고 수정할 때마다 명령어를 실행하기 번거롭다! 하시면 아래와 같이 –watch 명령어를 활용하시면 됩니다!

Sass의 기능은 이 외에도 연산기능이나 @if{}, @for{}, @each{} 등 다양한 기능이 있는데.. 자세한 내용들은 http://sass-lang.com/을 참고하시면 좋을 것 같습니다.

 # 참고자료
http://sass-lang.com/
http://sassmeister.com/ ← Sass를 설치하지 않고도 scss를 쓸 경우, css로 어떻게 출력되는지 확인할 수 있는 사이트
– 도서 [댄 시더홈 웹디자이너를 위한 SASS]