Sass(SCSS) 사용하기 : mixin

problem_hun·2023년 7월 20일
CSSTIL
2

오늘의 집 클론코딩 : 내일의 집

목록 보기
5/9
post-thumbnail

Sass로 스타일링을 할 때 변수나 mixin을 선언하고 반복적으로 사용할 수 있다고 했다.

이번에는 스타일링을 함수처럼 사용해 변수보다 다양하게 활용이 가능한 mixin에 대해 알아보자.

mixin을 한 번 배워놓으면 같은 코드를 절대 반복해서 쓰는 일이 없게 된다.

mixin

사용법

mixin을 사용하는 방법을 알아보자.

mixin 선언

  1. @mixin을 쓰고 mixin의 이름을 작명한다. 작명 규칙은 Sass 변수와 비슷하다.

  2. 인자값을 넣을 수 있는 소괄호()와 css를 입력하는 중괄호{}를 입력한다.

  3. 인자값으로 들어갈 수 있는 변수명을 소괄호에 적어주고, 그 변수가 적용될 스타일링 코드를 중괄호 안에 적어준다. 만약, 스타일링 코드에서 인자를 사용하지 않는다면 소괄호에 인자로 넣은 변수명을 적지 않아도 된다.

 

color의 값에 인자로 $color라는 변수를 받도록 mixin을 만들어보았다.

@mixin ripple($color) {
  color: $color;

  .ic-close {
    width: 40px;
  }
}

mixin 사용

mixin을 적용하려는 선택자에서 @include <mixin 이름>(인자 값); 을 입력하고 Sass를 실행시키면 된다.

p {
	@include ripple(blue);
}

 

p선택자에 mixin의 인자로 blue를 넣어 color가 blue로 적용되었다.

 

예시

Text Style

저번 Sass 변수 포스팅에서 작성했던 글씨체에 대한 변수를 이번 mixin 작성에 사용해보자.

폰트 사이즈 12에 대해 설정한 스타일 변수들을 text-style-12라는 mixin으로 만들어보았다.

mixin을 사용할 때 넣는 인자가 없다면 소괄호()를 생략해도 된다.

그런데 이런 식으로 여러 개의 mixin을 만드는 것도 좋지만, 이렇게 만든 mixin을 이용해 또 통합형 mixin을 만들 수 있다.

다음은 text-style이라는 통합형 mixin을 만들고 인자로 폰트 사이즈와 색깔을 인자로 받도록 만들어보았다.
폰트 사이즈는 인자로 반드시 받아야 하고, 컬러는 선택적으로 받을 수 있도록 기본값을 지정해 주었다.

또한 컬러를 인자로 받을 때, 인자로 컬러 값이 들어왔는지 유효성 검사를 할 수 있는데 이는 Sass의 type-of() 라는 내장함수로 할 수 있다. type-of(<인자값>) == 속성 으로, 받은 인자값이 특정 속성의 값인지 검사할 수 있다.

@mixin text-style($size, $color: false) {
  // $color: false : 색깔이 없을땐 기본값 설정
  @if ($size==12) {
    @include text-style-12();
  }
  @if ($size==13) {
    @include text-style-13();
  }
  @if ($size==14) {
    @include text-style-14();
  }
  @if ($size==16) {
    @include text-style-16();
  }
  @if ($size==18) {
    @include text-style-18();
  }
  @if ($size==24) {
    @include text-style-24();
  }

  // type-of() : 인자 유효성 체크
  @if (type-of($color) == color) {
    color: $color;
  }
}

유효성 검사로 인해 컬러의 인자로 컬러의 값을 넣지 않고 다른 값을 넣으면 적용이 되지 않는다.

 

Responsive

반응형 코드(미디어 쿼리)를 좀 더 쉽게 작성할 수 있는 Responsive mixin을 만들어보자.

T는 태블릿 사이즈, D는 데스크탑 사이즈를 뜻하는 반응형 미디어 쿼리 코드가 적용되도록 mixin을 만들어보았다.

mixin의 스타일 외에도 추가로 스타일 코드를 적을 수 있게 하려면 중괄호에 @content를 입력해주면 된다.


@mixin responsive($screen) {
  @if ($screen == 'T') {
    @media screen and (min-width: 768px) {
      @content;
    }
  }
  @if ($screen == 'D') {
    @media screen and (min-width: 1200px) {
      @content;
    }
  }
}

그러면 사용할 때 중괄호에 추가로 적은 스타일링 코드가 적용되는 것을 볼 수 있다.

이제 @media screen and (min-width: 768px)~~ 같이 미디어 쿼리 코드 대신 responsive()로 퉁 칠 수 있게 된다.

 

Positions

스타일링을 하다보면

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

같은 position을 이용한 중앙 정렬 스타일링 코드를 자주 작성할 때가 있다.
이것을 mixin으로 만들어 놓으면 간단하게 스타일링 코드 3~4줄을 mixin 하나로 퉁칠 수 있다.

가로 가운데 정렬 pos-center-x,
세로 가운데 정렬 pos-center-y,
정중앙 정렬 pos-center mixin을 만들어 보았다.
기본값으로는 absolute가 적용되도록 하였고, fixed도 적용할 수 있도록 하였다.


@mixin pos-center-x($type: absolute) {
  @if ($type==fixed or $type==absolute) {
    position: $type;
    left: 50%;
    transform: translateX(-50%);
  }
}

@mixin pos-center-y($type: absolute) {
  @if ($type==fixed or $type==absolute) {
    position: $type;
    top: 50%;
    transform: translateY(-50%);
  }
}

@mixin pos-center($type: absolute) {
  @if ($type==fixed or $type==absolute) {
    position: $type;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

다음은 modal이라는 클래스에 pos-center mixin을 적용한 모습이다. 인자로 fixed를 넣어 position에 fixed가 적용되었다.

 

Flexbox

가장 많이 쓰는 display : flex도 mixin으로 만들어놓으면 스타일링이 한 결 간단해진다.
justify-content 와 align-items 를 일일이 적지 않고 mixin으로 설정해 놓고 값을 인자로 받으면 되기 때문이다.

justify-content의 인자로는 앞 글자를 따 jc로 하였고,
align-items도 마찬가지로 ai라고 인자 이름을 정하였다.
인자의 기본값은 center로 하였다.

기본 flexbox 외에도 inline-flexbox 와 column-flexbox mixin도 만들어 놓으면 사용하기 편하다.

@mixin flexbox($jc: center, $ai: center) {
  display: flex;
  justify-content: $jc;
  align-items: $ai;
}

@mixin inline-flexbox($jc: center, $ai: center) {
  display: inline-flex;
  justify-content: $jc;
  align-items: $ai;
}

@mixin column-flexbox($jc: center, $ai: center) {
  display: flex;
  flex-direction: column;
  justify-content: $jc;
  align-items: $ai;
}

그런데 justify-content와 align-items의 인자값을 적을 때 flex-start나 space-between 같이 긴 문자를 넣기가 불편할 수 있다.

이것을 해결하는, 축약형 문자만 넣고도 flex-start나 space-between 을 사용할 수 있게 하는 Sass의 function과 map에 대해 알아보자.

map

Sass의 map은 키와 값이 하나의 쌍으로 이루어진 데이터다.
map을 만드는 방법은 변수와 똑같이 $로 시작하는 map의 이름을 정하고, 중괄호에 키와 값으로 이루어진 쌍으로 된 데이터를 넣으면 된다.

$flex-map: (
  start: flex-start,
  end: flex-end,
  between: space-between,
  around: space-around,
  stretch: stretch,
  center: center,
);

function

function은 타 프로그래밍 언어에서 볼 수 있는 function과 같다.
입력값을 받아서 출력값을 반환하는 함수이다.

mixin과 차이점이라면 mixin은 스타일링 코드 자체를 반환하지만, function은 결괏값 하나만을 반환한다.

만드는 방법은 function과 return 앞에 @를 붙여주고, 인자는 똑같이 $를 앞에 붙여주면 된다.

가령, 다음과 같이 인자로 a와 b를 받아서 더한 값을 픽셀로 반환하는 function plus가 있다고 해보자.

@function plus($a, $b) {
  @return ($a + $b) px;
}

width의 값으로 plus(1, 2)를 넣고 Sass 컴파일을 하게 되면 3px이라는 값이 반환된다.

 

이제 이것을 flexbox mixin에서 응용해보자.

  1. 키는 축약형으로 쓸 문구를, 값에는 해당 축약형의 풀네임을 넣어 map을 만든다.
$flex-map: (
  start: flex-start,
  end: flex-end,
  between: space-between,
  around: space-around,
  stretch: stretch,
  center: center,
);

 

  1. 그리고 그 map을 이용해 풀네임이 나올 수 있도록 함수를 만들어주자.
    이때 map-get이라는 Sass 내장 함수를 사용할 수 있는데, 맵과 키를 입력하면 그 맵의 키에 대응하는 값을 반환한다.

map-get(map, key)

map에는 맵의 이름을, key에는 맵의 키 이름을 입력한다.
그러면 해당 맵에서 해당 키에 해당하는 값을 반환한다.

다음은 키 값을 인자로 넣으면 $flex-map 맵에서 그 키에 대응하는 값을 반환하는 함수다.

@function _get-flex-value($key) {
  @return map-get($flex-map, $key);
}

 

  1. 이제 마지막으로 flexbox에서 justify-content와 align-items의 값으로 위의 함수를 넣어주면 인자로 start만 넣어줘도 flex-start가 적용이 된다.
@mixin flexbox($jc: center, $ai: center) {
  display: flex;
  justify-content: _get-flex-value($jc);
  align-items: _get-flex-value($ai);
}

@mixin inline-flexbox($jc: center, $ai: center) {
  display: inline-flex;
  justify-content: _get-flex-value($jc);
  align-items: _get-flex-value($ai);
}

@mixin column-flexbox($jc: center, $ai: center) {
  display: flex;
  flex-direction: column;
  justify-content: _get-flex-value($jc);
  align-items: _get-flex-value($ai);
}

profile
problem_hun
문제아
이전 포스트

CSS 그리드 시스템 (Grid System)

다음 포스트

Sass(SCSS) 사용하기 : 기호 &

0개의 댓글