[SCSS] 💎 함수형 프로그래밍 (mixin / functions)

...

Mixin (믹스인)

Sass Mixins는 스타일 시트 전체에서 재사용 할 css 선언 그룹 을 정의하는 아주 훌륭한 기능입니다.
약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다.

mixin 을 선언 할 떄는@mixin 를 사용하며, 이를 사용 할 때는 @include 를 사용합니다.

Sass

@mixin large-text { /* 선언 */
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}



h1 {
  @include large-text; /* 사용 */
}
div {
  @include large-text;
}

css

h1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
h1::after {
  content: "!!";
}
h1 span.icon {
  background: url("/images/icon.png");
}

div {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
div::after {
  content: "!!";
}
div span.icon {
  background: url("/images/icon.png");
}

인수(Arguments)

Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다.

Sass

@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, red); }
.box2 { @include dash-line(4px, blue); }

css

.box1 {
  border: 1px dashed red;
}
.box2 {
  border: 4px dashed blue;
}

인수의 기본값 설정

Sass

@mixin dash-line($width: 1px, $color: black) { /* 기본값 설정 */
  border: $width dashed $color;
}

.box1 { @include dash-line; }
.box2 { @include dash-line(4px); }

css

.box1 {
  border: 1px dashed black;
}
.box2 {
  border: 4px dashed black;
}

키워드 인수(Keyword Arguments)

Mixin에 전달할 인수를 입력할 때 명시적으로 키워드(변수)를 입력하여 작성할 수 있습니다.
별도의 인수 입력 순서를 필요로 하지 않아 편리하게 작성할 수 있습니다.
단, 작성하지 않은 인수가 적용될 수 있도록 기본값을 설정해 주는 것이 좋습니다.

Sass

@mixin position(
  $p: absolute,
  $t: null,
  $b: null,
  $l: null,
  $r: null
) {
  position: $p;
  top: $t;
  bottom: $b;
  left: $l;
  right: $r;
}

.absolute {
  /* 키워드 인수로 설정할 값만 전달 */
  @include position($b: 10px, $r: 20px);
}

.fixed {
  /* 인수가 많아짐에 따라 가독성을 확보하기 위해 줄바꿈 */
  @include position(
    fixed,
    $t: 30px,
    $r: 40px
  );
}

css

.absolute {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.fixed {
  position: fixed;
  top: 30px;
  right: 40px;
}

가변 인수(Variable Arguments)

때때로 입력할 인수의 개수가 불확실한 경우가 있습니다. 그럴 경우 가변 인수를 사용할 수 있습니다.
가변 인수는 매개변수 뒤에 ...을 붙여줍니다.

자바스크립트의 나머지연산자와 같다고 보면 됩니다.

Sass

/* 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음 */
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $bg-values;
}


div {
  /* 위의 Mixin(bg) 설정에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달 */
  @include bg(
    100px,
    200px,
    url("/images/a.png") no-repeat 10px 20px,
    url("/images/b.png") no-repeat,
    url("/images/c.png")
  );
}

css

div {
  width: 100px;
  height: 200px;
  background: url("/images/a.png") no-repeat 10px 20px,
              url("/images/b.png") no-repeat,
              url("/images/c.png");
}

Sass

@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}


div {
  /* 매개변수 순서와 개수에 맞게 전달 */
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}
span {
  /* 필요한 값만 키워드 인수로 변수에 담아 전달 */
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}
a {
  /* 필요한 값만 키워드 인수로 전달 */
  @include font((weight: 900, family: monospace)...);
}

css

div {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
}
span {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  font-family: sans-serif;
}
a {
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  font-family: monospace;
}

@content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록 을 전달할 수 있습니다.

@content 를 사용하면 나중에 @include 하였을 때, 그 선택자 내부의 내용들이 @conent 부분에 나타나게됩니다.

Sass

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  /* icon Mixin의 기존 기능만 사용 */
  @include icon("/images/icon.png");
}
.icon2 {
  /* icon Mixin에 스타일 블록을 추가하여 사용 */
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

css

.icon1::after {
  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

Function (함수)

mixin과의 차이점은 mixin 은 style markup 을 반환하지만,

function 은 @return 를 통하여 값 을 반환합니다.

Function을 선언 할 때는, @function 를 사용합니다.

Sass

$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns(); 
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}

css

.box_group {
  /* 총 너비 */
  width: 980px;
}
.box_group .box1 {
  /* 총 너비의 약 8.3% */
  width: 81.66667px;
}
.box_group .box2 {
  /* 총 너비의 약 66.7% */
  width: 653.33333px;
}
.box_group .box3 {
  /* 총 너비의 25% */
  width: 245px;
}

위와 같이 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있습니다.
따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋습니다.

내장 함수란, 응용 프로그램에 내장되어 있으며 최종 사용자가 액세스 할 수 있는 기능입니다.
예를 들어, 대부분의 스프레드 시트 응용 프로그램은 행이나 열의 모든 셀을 추가하는 내장 SUM 함수를 지원합니다.

예를 들어, 색의 빨강 성분을 가져오는 내장 함수로 이미 red()가 있습니다.
같은 이름을 사용하여 함수를 정의하면 이름이 충돌하기 때문에 별도의 접두어를 붙여 extract-red() 같은 이름을 만들 수 있습니다.

/* 내가 정의한 함수 */
@function extract-red($color) {
  /* 내장 함수 */
  @return rgb(red($color), 0, 0);
}

div {
  color: extract-red(#D55A93);
}

@function vs @mixin

@functoin은 값 하나를 Return
@mixin은 속성 묶음을 반환

Reference

https://heropy.blog/2018/01/31/sass/

인용한 부분에 있어 만일 누락된 출처가 있다면 반드시 알려주시면 감사하겠습니다

이 글이 좋으셨다면 구독 & 좋아요

여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.

[SCSS] 💎 함수형 프로그래밍 (mixin / functions)

Mixin (믹스인)

인수(Arguments)

인수의 기본값 설정

키워드 인수(Keyword Arguments)

가변 인수(Variable Arguments)

@content

Function (함수)

@function vs @mixin

[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)

[SCSS] 💎 내장함수 모음 (Built-in Functoins)

[SCSS] 💎 불러오기 (Import) 기능

[SCSS] 💎 연산자 (Operations) 정리

티스토리툴바