불러오기(import)

sass도 css처럼 import를 사용해서 여러 sass파일들을 import할 수 있다. 큰프로젝트를 사용할 때 스타일을 여러 파일들로 나누고, 다른 파일에서 사용할 스타일을 불러와서 사용하면 된다.

css import와 다른 점은 css는 import된 여러 css파일의 로딩을 http에 요청해야한다면, sass는 여러개의 scss파일을 import해도 최종적으로 하나의 css로 컴파일해주기 때문에 여러번 요청을 보낼 필요가 없다.

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

• 참고로 scss파일을 import할 경우, scss확장자를 써주지 않아도 된다.

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

상속(extend)

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

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

sass

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

css

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

위 코드를 보면 동일한 패딩,보더를 가지고 배경색만 다를 경우 extend를 이용하면 공통되는 속성값에 대한 클래스를 (,)콤마구분으로 묶어서 출력해주고, 다른 속성값에서만 따로 출력해준다.

<div class= "box news-box"></div>

이렇게 하면 위 코드처럼 html에서 클래스를 두 번 써야하는 작업을 줄일 수 있다.

믹스인(mixin)

프로젝트를 하다보면 말줄임을 표현하는 스타일,버튼스타일 ,아이콘 스타일에 해당하는 클래스를 만들어 놓고, 필요한 위치에 넣어주는 경우가 있는데 mixin기능을 사용하면 더 쉽게 반복적인 작업을 할 수 있다. 또한 mixin은 특정 속성값을 인자로 전달할 수 있다.

mixin을 선언 할 때는 @mixin 지시자를 사용하며, 적용할 때는 @include지시자를 사용한다.

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

sass

@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; }

위 sass 코드에서 ( $wid:100% ) 는 $wid를 인자로 받는데 넘겨주는 없을 경우 기본값을 100%로 전달한다는 것이다. 옵션의 디폴트 값을 지정해주는 거라고 보면 된다. 기본값은 (:)콜론으로 정의한다. 그런데 주의해야할 점은 기본값이 없는 인자에 대해 값을 넣어주지 않으면 에러가 난다는 점을 기억하자.

mixin은 말줄임 표현이나 버튼 스타일 등 여러가지 스타일이 조합되서 하나의 스타일을 만들 때 사용하면 좋을 것 같다. 또한 css3에서 브라우저별로 다른 벤더 프리픽스를 입력할 때 좋다.

mixin을 사용하면 아래 코드처럼 사용할 수 도 있다.

scss

@mixin media( $queryPoint ){
	@media #{ $queryPoint } {
		@content;
	}
}
 
.news-list{
	width : 100%;
	@include media( "(max-width:480px)" ){
		width : 50%;
	}
}

css

.news-list { width: 100%; }
@media (max-width: 480px) { .news-list { width: 50%; }

여기서 #{ } 코드는 특정 문자열을 따로 처리하지 않고 그대로 출력 할 때 사용한다. @content 지시자를 사용하면 @include 했을 때, 해당 선택자 내부의 내용들이 @content부분에 나타나게 된다.

mixin과 extend를 보면 두 문법 모두 공통된 스타일을 적용하지만 적용되는 코드에서 차이가 있다. mixin은 공통된 속성을 클래스 마다 넣어주고 extend는 (,)콤마 선택자로 클래스들을 하나로 묶어서 한번 만 넣어준다. 작업자의 스타일과 상황에 맞게 사용하면 될 것 같다.