Sass의 import, extend, mixin

Import

sass도 css처럼 import를 사용해서 여러 sass파일들을 import 할 수 있다. 큰 프로젝트를 할 때 스타일들을 여러 파일들로 나누고, 다른 파일에서 사용할 스타일을 불러와서 사용하면 된다. css import와 다른 점은 css는 import된 여러 css 파일의 로딩을 http에 요청해야한다면, sass는 여러개의 scss파일을 import 해도 최종적으로 하나의 css로 컴파일해주기 때문에 여러번 요청을 보낼 필요가 없다.

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

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

 

 

extend

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

 

[sass]

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

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

 

[css]

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

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

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

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

 

 

placeholder selectors

extend를 사용할 때 id나 class 선택자처럼 %로 선택자를 만들 수 있다. placeholder 선택자 %를 사용하면 상속은 할 수 있지만 해당 선택자는 컴파일 되지 않는다. 투명 선택자라고 보면 된다. 아래 코드와 위 코드를 비교해 보면 이해 할 수 있다.

 

[sass]

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

 

[css]

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

 

 

mixin

@mixin와 @include는 항상 함께 사용되며, @mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있다.

즉 여러 개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능하다. 이때 설정에는 @mixin을 그리고 사용할 때는 @include를 사용하면 된다.

 

@mixin을 사용하여 미리 선언해두면 동일한 레이아웃 등의 스타일 지정에 매우 편리하다.

만약 스크롤바의 스타일을 항상 정해진 스타일로 보이고 싶은 경우에도 아래와 같이 @mixin을 사용해 선언할 수 있다.

 

[sass]

@mixin box-default {
  padding: 20px 30px;
  margin-bottom: 20px;
}

div {
  @include box-default
}



@mixin scrollbar-default {
  ::-webkit-scrollbar {
    width: 10px;
    height: 20px
  }
  ::-webkit-scrollbar-track {
    background-color: darkblue;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: black;
  }
}

p {
  @include scrollbar-default
}

 

[css]

div {
  padding: 20px 30px;
  margin-bottom: 20px;
}


p {
  ::-webkit-scrollbar {
    width: 10px;
    height: 20px
  }
  ::-webkit-scrollbar-track {
    background-color: darkblue;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: black;
  }
}

 

 

 

조건문 사용하는 방법(if, else)

[sass]

@mixin fontSize($size) {
  @if $size == 'small' {
  	font-size: 10px;
  }
  @else if $size == 'large' {
    font-size: 16px;
  }
  @else {
    font-size: 12px;
  }
}


div {
  @include fontSize('small'); // font-size: 10px;
  @include fontSize('large'); // font-size: 16px;
  @include fontSize; // font-size: 12px;
}

 

 

mixin에 arguments를 사용하기

@mixin의 특징으로 인자를 사용하여 함수처럼 사용할 수 있다는 점이다.

만약 아래의 box-default의 padding 값을 상황에 따라 다르게 주고 싶다면 아래와 같이 사용할 수 있다.

[sass]

@mixin box-default($padding, $margin) {
  padding: $padding;
  margin: $margin;
}

div {
  @include box-default(10px, 20px);
}

 

[css]

div {
  padding: 10px;
  margin: 20px;
}

 

 

인자 값에 기본 값을 넣어줄 수도 있다. 인자 값으로 아무 값도 넣지 않았을 때는 기본 값으로 들어가게 된다.

아래처럼 작성하면 이젠 값이 없어도 기본 값이 들어가게 된다.

[sass]

@mixin box-default($padding: 20px, $margin: 10px) {
  padding: $padding;
  margin: $margin;
}

 

 

여기서 #{ } 코드는 특정 문자열을 따로 처리하지 않고 그대로 출력 할 때 사용한다.

@content 지시자를 사용하면 @include 했을 때, 해당 선택자 내부의 내용들이 @content부분에 나타나게 된다.

 

[sass]

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

 

 

 

 

 

mixin과 extend를 보면 두 문법 모두 공통된 스타일을 적용하지만 적용되는 코드에서 차이가 있다.

mixin은 공통된 속성을 클래스 마다 넣어주고 extend는 (,)콤마 선택자로 클래스들을 하나로 묶어서 한번 만 넣어준다. 작업자의 스타일과 상황에 맞게 사용하면 될 것 같다.