[Sass로 디자인하라 : 양용석] - Scss 6가지 핵심 기능 요약

Sass와 Scss의 차이는 세미콜론을 붙이느냐, 안 붙이느냐 그리고 대괄호로 묶어주냐 마냐이다. 전자가 Scss이다.

1. 변수를 사용할 수 있다.

변수 정의 시 $기호 사용한다.

$font-stack: nanum-gothic, sans-serif;
$primary-color:#333;
$url-images: 'assets/images/';

body{
	font:100% $font-stack;
    color:$primary-color;
    background: $primary-color url($url-images + 'img-names.jpg');
}

 

2. 중첩이 가능하다.

$default-color:#999;
$navhover-color:#333;

nav{
	ul{
    	list-style:none;
    	li{
        	display:inline-block;
            a{
            	display:block;
                paddig:5px 3px;
                margin:0 auto;
                text-decoration:none;
                color: $default-color;
                
                &:hover{
            	border-bottom:1px solid $navhover-color;
            	color:$navhover-color;
            	}
            }
        }
    }
}

 

3.부분화 / 불러오기 (@import) 할 수 있다.

_color.scss // 부분화를 하는 파일 이름은 앞에 언더바를 추가해야 한다.

@import '파일명' // 언더바와 확장자는 쓰지 않는다.

 

4.믹스인 (@mixin - @include)

브라우저 별 접두사 처리와 반복 속성을 돕는다.

크롬, 사파리 -webkit- / 파이어폭스 -moz- / IE -ms-

/*사용 방법*/
@mixin '속성명'($적용값){
	-접두사-속성명:$적용값 
}
.target{
	@include 믹스인이름(넘겨줄 값);
}

접두사는(크롬 > 사파리 > 파이어폭스 > IE > CSS3속성 순으로 배열하는 것이 좋다)

/*예시*/
@mixin border-radius($radius){
	-webkit- border-radius:$radius;
    -moz- border-radius:$radius;
    -ms-border-radius:$radius;
}

.firstBox{
	@include border-radius(10px);
}

.secondBox{
	@include border-radius(20px);
}

/* 위 예시 결과 */

.firstBox{
		-webkit- border-radius:10px;
    -moz- border-radius:10px;
    -ms-border-radius:10px;
}

.secondBox{
		-webkit- border-radius:20px;
    -moz- border-radius:20px;
    -ms-border-radius:20px;
}

 

5. 확장 (Extend)/ 상속(Inferitance)

비슷한 코드 통합

//일반 메시지는 검정색
.msg{
	border:1px solid #ccc;
    padding:10px;
    color:black;
}


.pass{
	@extend .msg; //.msg 스타일을 그대로 복사해 가져온다.
    border-color: dodger-blue; //통과 메시지는 파란색
}


.err{
	@extend .msg; //.msg 스타일을 그대로 복사해 가져온다.
    border-color:red //에러 메시지는 빨강색
}


.warn{
	@extend .msg;//.msg 스타일을 그대로 복사해 가져온다.
    border-color:yellow; //경고 메시지는 노랑색
}

 

6.연산자

간단한 사칙연산이 가능하다. 반응형 레이아웃 작업시 유용

.container{
	width:100%;
}

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

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