SASS 문법 사용해보기

SCSS를 사용하는 방법을 알아볼게요

SCSS는 변수와 믹스인, 익스텐드 와 함수의 기능으로 이루어져 있습니다.

그럼 하나씩 알아보도록 할게요.

변수

SCSS에서 변수는 자바스크립트에서의 변수의 개념보다 실수의 개념에 가깝습니다.

1. $sz100 : 100%;
2. $default_sz : 0;
3. $default_szpx : 1px;
4. $base_color : #555;
5. $base_bgcolor : #fff;
6. $base_font : '돋움', dotum,'Helvetica', sans-serif;
7. $font_type1 : 'arial';
8. $hide : none;
9. $hidden : hidden;
10. $normal : noraml;

$구문을 사용하여 값을 변수에 담을 수 있습니다.

부트스트랩의 SCSS 변수를 보면 상당히 많은 변수를 체계적으로 정리 해놓은 것을 볼 수 있습니다.

제가 쓰는 변수를 보여드릴게요

변수	설정값	설명	변수	설정값	설명
$sz100	100%	전체 width	$default_sz	0	기본 사이즈
$default_szpx	1	기본 픽셀 사이즈	$base_color	#555	기본 폰트 색상
$base_bgcolor	#fff	기본 백그라운드 색상	$base_font	'돋움', dotum,'Helvetica', sans-serif;	기본 폰트 설정
$font_type1	'arial'	추가 폰트 타입 확장	$hide	none	기본 감추기 속성
$hidden	hidden	overflow, visibillity 등에 활용되는 숨김 속성	$normal	normal	굵기 및 기본 속성 초기화
$pos_default	relative	포지션 기본값 relative	$pos_abs	absolute	포지션 absolute
$dp_default	block	디스플레이 속성 기본값	$dp_inline	inline	인라인 속성
$dp_inblock	inline-block	인라인 블록속성	$gray_dp0~9	lighten($black, 10%)	밝기값 전체 블랙 #000 대비 10% ~ 95%(먼셀 색체계 표준 명도 적용)

SCSS를 구조화 하는 작업이 디테일 해질수록 더 많은 변수를 정의 할 수 있고 필요에 따라 바뀔 수 있지만, 좀더 개발 작업이 편하다는 것을 느낄 수 있을거에요~

믹스인

SCSS에는 MIXIN 기능이 있어서 코드를 섞는 것이 가능합니다.

예제를 볼게요

MIXIN

1. @mixin default_boxsize {outline:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}

SCSS에 적용

1. .btn_menu {
2. @include default_boxsize;
3. }

CSS 컴파일 결과

1. .btn_menu {outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

이런식으로 CSS로 컴파일 되는 것을 확인 할 수 있어요

다음은 믹스인 중에서도 조건문을 활용하는 예제를 보도록 할게요

MIXIN

1. @mixin rounded_corner($arc:true, $top_left:true, $top_right:true, $bottom_left:true, $bottom_right:true) {
2. @if $arc {
3. -moz-border-radius: $arc;
4. -webkit-border-radius: $arc;
5. border-radius: $arc;
6. }
7. @if $top_left {
8. -moz-border-top-left-radius: $top_left;
9. -webkit-border-top-left-radius: $top_left;
10. border-top-left-radius: $top_left;
11. }
12.  
13. @if $top_right {
14. -moz-border-top-right-radius: $top_right;
15. -webkit-border-top-right-radius: $top_right;
16. border-top-right-radius: $top_right;
17. }
18.  
19. @if $bottom_left {
20. -moz-border-bottom-left-radius: $bottom_left;
21. -webkit-border-bottom-left-radius: $bottom_left;
22. border-bottom-left-radius: $bottom_left;
23. }
24.  
25. @if $bottom_right {
26. -moz-border-bottom-right-radius: $bottom_right;
27. -webkit-border-bottom-right-radius: $bottom_right;
28. border-bottom-right-radius: $bottom_right;
29. }
30. }

SCSS에 적용

1. ul.tabbox li {@include rounded_corner(false, 5px, 5px, false, false);}

CSS 컴파일 결과

1. ul.tabbox li {-moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-top-right-radius: 5px;
2. -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }

MIXIN 에 인자값을 넣어주고 해당 인자값에 조건문을 걸어 필요에 따라 조절 되는 border값을 확인 할 수 있어요.

다음은 함수에 대해서 알아보도록 할게요.

함수

SCSS에서는 문법에 맞게 함수를 활용 할 수 있어요. 다음 예제는 함수를 통해 폰트를 정의합니다.

함수

1. // 폰트 자동 환산 함수적용
2. // $size를 매개변수로 기본 픽셀은 값에 맞게 rem 단위로 환산
3. @function calculateRem($size) {
4. $remSize: $size /16px;
5. @return $remSize * 1rem;
6. }

믹스인 적용

1. @mixin font-size($size) {font-size:calculateRem($size)}

SCSS 문법에 적용

1. @include font-size(16px);

CSS 컴파일 결과

1. {font-size:1rem;}

이상 4가지 기능에 대해서 간단하게 설명 드렸어요

SCSS는 정말 멋진 언어 입니다.

어떤 프로젝트를 진행 하면서 SCSS는 업무 협의와 성과에 큰 역할 을 할것입니다.