TIL: 31일차 "SCSS -2-"

SCSS mixin

SCSS에는 mixin이라는 요소가 있다.
mixin은 SCSS에서 사용할때는 외부에 _mixixs.scss라는 파일을 만들어 사용 하게 되는데,
파일을 작성할때는

@mixin title {
  color: tomato;
  font-size: 25px;
  background-color: wheat;
}

와 같이 @을 먼저 사용하고, 그 뒤에 넣고 싶은 속성들을 입력한다.

그 다음, style.scss 즉 우리가 주로 스타일을 조작하는 파일에서 _mixixs.scss를 import하고,

다음과 같이 작성한다.

h1 {
  @include title();
}

과 같이 입력한다.

여기서 생각해야 할 점은, _mixixs.scss파일에서 작성할때 @mixin 뒤에 오는 이름은 클래스등 혹은 id가 아니라,
해당 mixin의 이름이란 것이다.
마치 함수와 같이 이름을 정의하고, 패키지와 같이 안에 속성들을 정해놓은것을 적용 시키는것이다.

적용을 시킬땐 @include를 입력하고, mixin의 이름 뒤에 ()를 붙여준다.
이 부분도 함수를 사용할때와 비슷한 부분이다.

mixin에는 또다른 기능도 있다.

mixin을 작성 할때, 사용하고 싶은 변수를 허용 할 수 있다는것이다.
변수를 허용 할때는,

@mixin title($color) {
  color: $color;
  font-size: 25px;
  background-color: wheat;
}

와 같이 입력하게 된다.
그 다음, 이 속성을 사용할때는

h1 {
  @include title(tomato);
}
span {
  @include title(red);
}

와 같이 입력하여 사용 할 수 있다.

이렇게 사용하면 요소마다 다른 변수값을 줘서 보다 재사용이 유리하게 만들어줄 수 있다.

이런 사용법도 있다.
minin의 인자로는 문자열도 사용 할수가 있는데,

h1 {
  @include title("tomato");
}
span {
  @include title("red");
}

와 같이 쓰고,

@mixin title($word) {
  font-size: 25px;
  background-color: wheat;
  @if &word == "tomato" {
    color: tomato;
  } @else {
    color: red;
  }
}

처럼 if문과 연계해서 사용 할 수도 있다.
CSS를 사용함에 있어서, 더욱더 편하고 유연성 있는 사용을 가능하게 만들어 주는것이다.

mixin에는 @content라는것도 사용이 가능하다.

@content는 mixin에 원하는 곳으로 인자를 전달 할 수 있는 특징이 있다.

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}

과 같이 _mixixs.scss에 저장 한 다음,
style.scss에서

.icon1 {
  @include icon("/images/icon.png");
}
.icon2 {
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

와 같이 입력하여 사용 할 수도 있다.
이를 이용하여, 여러가지 크기에 대응 할 수 있게 반응형 디자인을 사용 할 수도 있다.

SCSS extend

SCSS extend는 scss상에서 같은 코드를 중복시키고 싶지 않을때 사용하는 요소이다.
말 그대로 속성을 확장 시키는것이 가능하고 물론 재사용도 가능하다.

extend를 사용하기 위해서는

%botton {
  border-radius: 10px;
  text-transform: uppercase;
}

과 같이 다른 외부파일을 만들어 놓고, style.scss에 import시킨다.

a {
  @extend %button;
  text-decoration: none;
}
button {
  @extend %button;
  color: red;
}

와 같이 사용 할 수 있다.
즉 extend는 각 요소간의 공통 되는 부분을 묶어서 여러번 사용 할 수 있고,
공통 되지 않는 요소는 그대로 작성을 할 수 있는 기능이다.