Sass(Syntactically Awesome Style Sheets)는 CSS pre-processor Sass 와 Less가 양대 산맥이였는데 이제 Sass로 대동단결 되고 있다.

특히 Sass는 기존의 sass문법과 scss문법 두가지가 있었는데 이제는 scss로 css의 상위집합으로 발전했다. 이 모습이 꼭 TypeScript와 비슷하다.

대세가 되려면 최대한 표준에 가깝게 발전해야 하는 것 같다.

Syntax

import

// 작성 방법 : @import "파일명.scss" 또는 @import "파일명";
 
@import "variables";

partial .scss 파일의 이름을 underscore(_)로 시작하면 css파일로 따로 컴파일되지 않는다. html에서 해당 css파일을 불러올일이 없고, import만 되는 경우에는 이 기능을 사용하면 된다.

extend

sass 에서 특정 선택자를 상속 할 때, @extend 지시자를 사용

// 작성 방법 : @extend .클래스명; 또는 @extend %클래스명;

scss

.box{
	padding:20px;
	border:1px solid #333;
}
 
.news-box{
	@extend .box;
	background-color:#eee;
}
 
.list-box{
	@extend .box;
	background-color:#000;	
}

css result

.box, .news-box, .list-box { padding: 20px; border: 1px solid #333; }
.news-box { background-color: #eee; }
.list-box { background-color: #000; }

placeholder selectors scss

%box{
 
	padding:20px;
	border:1px solid #333;
}
 
.news-box{
	@extend %box;
	background-color:#eee;
}
 
.list-box{
	@extend %box;
	background-color:#000;	
}

css result

.news-box, .list-box { padding: 20px; border: 1px solid #333; }
.news-box { background-color: #eee; }
.list-box { background-color: #000; }

mixin

like function

// 작성 방법
// 선언 : @mixin mixin명{}
// 적용 : @include mixin명 또는 @include mixin(전달할 인자)

scss

@mixin ellipse-one($wid:100%){
	width:$wid; 
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space:nowrap;
}
 
.text{
	@include ellipse-one(80%);
}

css

.text { width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Syntax

import

extend

mixin

References