[Vue.js를 활용한 퍼블리싱] vue-paper-dashboard (2) Sass 활용법

저번 포스팅에는 Creative Tim 팀에서 만든 'vue-paper-dashboard' free 버전 프로젝트의 구조를 살펴보았습니다. 이번 포스팅에서는 vue-paper-dashboard에서 SCSS의 어떤 문법을 활용했는지를 중점적으로 설명드리겠습니다.

---

Popular CSS Preprocessor, SASS/SCSS!

요즘엔 CSS를 사용하기보다 CSS preprocessor를 많이 사용합니다. CSS Preprocessor란 CSS의 문법적 한계를 개선한 프로그램입니다. 그것들이 제공하는 문법을 통해서 웹 문서를 꾸밀 수 있습니다. 이름에서도 알 수 있듯이 컴파일을 하면 CSS가 되죠.

 

SASS/SCSS, Stylus, Less 등 여러 CSS proprocessor가 있지만 그 중 가장 많이 쓰이는 것은 SASS/SCSS인 것 같습니다.

 

SCSS는 SASS를 CSS와 완전히 호환되도록 업그레이드 한 버전(version 3)입니다.

 

Vue-paper-dashboard의 SCSS 사용법

Vue-paper-dashboard에서 SCSS를 어떻게 사용했는지 이해하기 위해서 필요한 SCSS 문법 4가지를 소개하겠습니다.

 

ㄹㅇㄹㄴㅇㄹㅇㄹㅇㄹ

1. Mixin

믹스인은 재사용 가능한 스타일을 만드는데 사용합니다.

@mixin 믹스인이름 { 스타일; }

 

assets/sass/paper/mixins/_vendor-prefixes.scss를 보면

@mixin box-shadow($shadow...) {	
    -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
    box-shadow: $shadow;
}

 

위와 같이 'box-shadow'라는 이름의 mixin이 선언되어 있습니다.

 

assets/sass/paper/_button.scss를 보면 'box-shadow' mixin이 재사용되고 있습니다.

.btn {
    box-sizing: border-box;
    
    ....
    
    &:hover,
    &:focus {
    	outline: 0 !important;
        @include box-shadow(none);
    }
    
    ....

}

 

결과적으로 .btn.focus에 box-shadow mixin에 정의된 스타일이 적용됩니다.

 

vue-paper-dashboard의 assets/sass/를 보면 'paper-dashboard.scss' 파일이 있고 하위 paper 폴더에는 _(underbar)가 파일명 맨 앞에 붙은 16개의 scss 확장자(.scss) 파일이 있습니다.

 

2. & (Ampersnad) : 상위 선택자

SCSS는 중괄호를 기준으로 선택자 중첩을 표현할 수 있습니다. 중첩 표현에서 &를 사용하면 상위 선택자를 가리키게 됩니다.

 

위 코드블럭에서 볼 수 있듯이 .btn의 가상 선택자, focus에 대한 스타일 정의도 CSS에서는 불가능하지만 SCSS를 사용했기 때문에 중첩과 &를 사용하여 위와 같이 표현할 수  있는 것입니다. CSS로 컴파일 된 결과를 보면 &가 상위 선택자인 .btn으로 치환되어 .btn:focus가 됩니다.

 

3. 파일 분할 (Partial)

assets/sass 폴더에 paper-dashboard.scss를 제외하고 모든 파일이름에 '_' (underbar)가 붙어있습니다.

파일이름에 언더바가 붙어있으면 컴파일 시 css 파일로 변환되지 않습니다. 대신 언더바가 붙은 파일을 import하고 있는 파일이 있을 것입니다. paper-dashboard.scss 파일이 바로 그 역할을 하고 있습니다.

@import "paper/variables";
@import "paper/mixins";
@import "paper/typography";
// Core CSS
@import "paper/misc";
@import "paper/sidebar-and-main-panel";
@import "paper/buttons";
@import "paper/inputs";
@import "paper/alerts";
@import "paper/tables";
@import "paper/checkbox-radio";
@import "paper/navbars";
@import "paper/footers";
// Fancy Stuff
@import "paper/dropdown";
@import "paper/cards";
@import "paper/chartist";
@import "paper/responsive";

 

따라서 컴파일을 하면 paper-dashboard.scss 파일에서 import 한 모든 분할 파일까지 합쳐진 하나의 css 파일을 얻게 됩니다.

 

4. !default (초깃값 설정)

assets/sass/paper/_variable.scss 파일을 보면 200여개의 변수들이 !default 와 함께 선언되어 있습니다. 단어 뜻 그대로 기본값 역할을 하겠다는 것입니다. 만약 아래와 같이 디폴트로 선언된 변수에 다른 값을 선언한 경우 기본값을 덮어쓰고 해당 값이 할당됩니다.

$font-color: #66615b !default;
$fill-font-color: rgba(255, 255, 255, 0.7);
$none: 0 !default;
$border-thin: 1px !default;
$border-thick: 2px !default;
....

$border-thick: 3px   // 위 기본값 설정을 덮어씀.

 

※ !default는 맨 처음 선언된 것만 유효해서 같은 변수에 대해 두번째 선언한 값은 무시됩니다.

$card-black-color: black !default;  // 유효

$card-black-color: red !default;    //무효

$card-black-color: black !default;  // 유효
$card-black-color: red !default;    //무효

 

※그리고 중요한 것은 컴파일 되는 순서입니다. 이 프로젝트에서는 paper-dashboard.scss에 import된 순서대로 컴파일됩니다.

현재 _cards.scss에서는 _variables.scss에 선언되어 있는 $card-black-color 변수를  사용합니다. 만약 $card-black-color 변수의 기본값을 사용하고 싶지 않다면 _cards.scss가 컴파일 되기 전에 이 변수의 값을 바꿔야 합니다.

즉,  @import "paper/cards"; 보다 앞에서 $card-black-color: 원하는색상; 을 작성해줘야 변경됩니다.

 

---

이상으로 vue-paper-dashboard에서 활용한 SCSS를 이해하기 위해서 필요한 문법 4가지를 살펴봤습니다. SCSS에 대한 더 자세한 내용은 아래 포스팅을 참조하는 것을 추천드립니다. :)

 

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!

 

다음 시간에는 vue-paper-dashboard에서 어떻게 vue.js의 slot을 사용하여 재사용성 높은 컴포넌트를 만들었는지 분석해보겠습니다~!