Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 Sass의 @mixin, @extend, @import 에 대한 문법을 다루어 보겠습니다.

@mixin

mixin(믹스인)은 함수와 비슷한 동작을 하는 문법이며 CSS 스타일 시트에서 반복적으로 재사용할 CSS 스타일 그룹 선언을 정의하는 기능을 합니다.

단순하게 CSS 그룹으로 정의하여 적용할 수 있지만 인수를 활용하게 되면,

반복되는 CSS 속성을 한 개의 mixin(믹스인) 정의를 가지고 다양한 CSS 스타일을 만들어 낼 수 있습니다.

• ✔ 정의하기 : @mixin 믹스인 이름 { CSS 스타일 } 
• ✔ 호출하기 : @include 믹스인 이름

믹스인 기본 문법

@mixin을 정의해 만든 CSS 스타일을 @include 이용하여 참조해서 재사용할 수 있습니다.

@mixin, @include 옆에 사용되는 이름은 selector가 아닌 함수 이름처럼 mixin 이름입니다. 

//@mixin - 스타일 정의
@mixin 믹스인 이름 {
	//CSS 스타일 내용
}

//@include - 믹스인 호출
@include 믹스인 이름

//믹스인 정의
@mixin tit_text {
    position: relative;
    padding-left: 10px;
    font: {
        size: 30px;
        weight: bold;
    }
    color:#000;

    &::before {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 2px;
        margin-top: -2px;
        background-color: #ccc;
        content: '';
    }

    span.icon-check {
        display:inline-block;
        width: 10px;
        height:10px;
        background: url('../img/icon-check.png');
    }
}

//믹스인 호출
h1 {
    @include tit_text;
}

h1 {
  position: relative;
  padding-left: 10px;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}
h1::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  margin-top: -2px;
  background-color: #ccc;
  content: '';
}
h1 span.icon-check {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("../img/icon-check.png");
}

인수(Arguments)

mixin은 함수처럼 인수를 가질 수 있습니다.

그렇기 때문에 하나의 mixin을 정의해도 다양한 결과를 만들어 낼 수 있습니다.

사용방법은 믹스인에서 매개변수를 지정해주고 include로 인수를 사용하면 됩니다. 

'매개변수'란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용됩니다.

제공되는 여러 데이터들을 '전달인수' 라고 부릅니다.

//정의하기
@mixin 믹스인 이름($매개변수) {
	//CSS 스타일 내용	
}

//호출하기
@include 믹스인 이름(인수);

@mixin border-line($width, $style) {
    border: $width $style #000;
}

.border-box1 {@include border-line(2px, solid);}
.border-box2 {@include border-line(4px, dotted);}

.border-box1 {
  border: 2px solid #000;
}

.border-box2 {
  border: 4px dotted #000;
}

@mixin border-line($width: 2px, $style: dotted) {
    border: $width $style #000;
}

.border-box1 {@include border-line;}
.border-box2 {@include border-line(6px);}

.border-box1 {
  border: 2px dotted #000;
}

.border-box2 {
  border: 6px dotted #000;
}

@mixin border-line($width: 2px, $style: dotted, $color: #000) {
    border: $width $style $color;
}

.border-box1 {@include border-line($width: 1px, $color: coral);}

.border-box1 {
  border: 1px dotted coral;
}

@extend

CSS 스타일을 정의하다 보면, 클래스 선택자의 모든 스타일은 동일하게 가져야 하지만 부분적으로 다른 경우가 발생합니다.

그럴 때 다중 클래스를 사용하거나 CSS 공통으로 사용하는 속성을 모아서 선언했을 것입니다. 

이럴 경우 @extend 를 사용하면 편리합니다.

그러나 @extend는 CSS 미디어쿼리 내에서 실행되지 않습니다.

그렇기에 반응형웹이나 모바일 웹퍼블리싱 작업 시에는 사용하지 않는 것이 좋습니다.

Sass Guideline 에서도 @extend는 사용을 권장하지 않습니다.

기본 문법은 아래와 같습니다.

@extend 선택자

.btn {
    padding: 10 15px;
    font: {
        size: 15px;
        weight: bold;
    }
    background-color: coral;
}

.ico {
    @extend .btn;
    background-color: #000;
}

.btn, .ico {
  padding: 10 15px;
  font-size: 15px;
  font-weight: bold;
  background-color: coral;
}

.ico {
  background-color: #000;
}

@import(불러오기)

@import 문법을 사용하면 외부에 모듈화 해서 분리해 놓은 Sass 파일을 불러와 병합하여 CSS로 컴파일할 수 있습니다.

또한 불러와 병합한 파일에 정의된 모든 변수 또는 믹스인을 주 파일에서 사용할 수 있습니다.

CSS @import는 사용할 때마다 http 호출을 매번 하기때문에 속도 저하를 가져올 수 있지만,

Sass @import는 CSS로 컴파일하여 바로 처리하기 때문에 http 호출이 필요하지 않아 속도 저하 문제를 발생시키지 않습니다.

기본 문법은 아래와 같습니다.

@import '파일경로/파일명'
@import 'font.scss'
@import 'font' //scss 파일 확장자명 생략가능

@import  실무에서 유용하게 사용하는 Tip

첫 번째, 변수와 @mixin은 따로 모듈화 분리하여 Sass 파일로 만들어서 @import 합니다.

이때 파일명 앞에 '_' 를 붙이면 CSS로 컴파일될 때 '_' 로 시작하는 파일명의 파일은 컴파일되지 않습니다.

예를 들어 _mixin.scss, _header.scss 파일명을 만들고, 주 파일에서 @import 하면 2개(_mixin.scss, _header.scss)의 파일 내용은 주 파일에 적용되지만 _mixin.scss, _header.scss 파일은 css로 컴파일 되지 않기 때문에 관리하기가 편리합니다.

두 번째, 하나의 @import로 여러 파일을 불러올 수 있습니다.

파일은 ',' 로 구분합니다.

@import '_mixin', 'header';

세 번째, 파일 확장자를 지정할 필요가 없습니다.

Sass에서는 당연히 파일명.scss 를 불러온다고 가정하기 때문입니다.

그러나 CSS 파일을 불러와야 할 경우에는 확장자명을 꼭 지정해 주어야 합니다.

마치며...

Sass는 현재의 포스팅을 마지막으로 기능과 사용법에 대해 모두 설명드렸습니다.

틈틈이 작성하여 3주 동안 6편의 내용으로 포스팅했습니다.

웹퍼블리싱 마크업 프로젝트를 마무리한 것 마냥 시원섭섭하네요!!ㅎㅎ

제가 작성한 Sass 관련 6편의 포스팅 내용을 정독하셨다면, 앞으로 Sass를 사용하시는데 큰 문제가 없을 것이라 생각됩니다.

진짜 뿌듯함과 시원섭섭함이 교차하네요!!

다음번에도 좋은 주제의 내용을 새로 가지고, 포스팅하도록 하겠습니다.

감사합니다.