[TIL] Sass - mixin, extend

jay__ss·2021년 11월 25일

CSS Sass scss 멋사 멋쟁이사자처럼

멋쟁이사자처럼 Front-End School

목록 보기

28/45

1. Mixin??

믹스인이란, 코드의 재사용을 위해 만들어진 기능이다.
반복되는 코드를 다시쓰는 작업을 없애기 위해 만들어진 기능이다.
(중앙정렬을 위한 flex, justify, align 묶음 정도를 생각하면 좋다)

반복되는 코드를 묶어놓은 것이라고 생각하면 된다.

믹스인을 쓸 때, 항상 같이 다니는 녀석을 기억하자.

@mixin, @include

1.2 Use mixin

@mixin center-xy {
   display: flex;
   justify-content: center;
   align-items: center;
}
.card {
   @include center-xy;
   background-color: blue;
}
.item {
   @include center-xy;
   background-color: red;
}

앳 사인인 골뱅이로 믹스인을 선언하고, 믹스인의 이름을 기입한다.
적용을 원하는 곳에서 마찬가지로 앳 사인으로 인클루드를 선언하고,
원하는 믹스인의 이름을 기입한다. -끝!-

항상 잊지말자. input, label처럼 믹스인과 인클루드는 같이 다니는 친구들이다.

반복하는 모든 코드를 하나의 mixin에 몰아넣어서 사용하는 건 좋지 못하다.
이를 테면,

정렬과 관련된 속성 믹스인 하나,

글자 크기와 줄간격에 관련된 믹스인 하나,

색상과 관련된 믹스인 하나
이런식으로 조금은 분리 된 형태가 재사용성에 있어서 효용성이 좋다!!!!

1.3 Arguments (인수)

우리는 앞서서 mixin이름 뒤에 바로 중괄호로 시작해 공통된 스타일을 작성해주었다.
그러나, mixin 이름 뒤에 괄호를 입력해주어 인수(?)를 넣어서 사용할 수 있다.

인수를 사용하는 이유는, 능동적인 스타일을 위해서이다.
위에서 본 경우는 '중앙정렬'이라는 하나의 목적이 있었지만,
배경화면을 지정해주고 싶은데
배경화면의 경로와 크기, 반복여부와 포지션 을 다르게 해주고 싶은 경우가 있을것이다.

(배경화면을 입힐 때마다, 속성들을 매번 치는것보다 훨씬 이득!!)

@mixin 믹스인이름 ($매개변수1, $매개변수2, $매개변수3) {
  속성1: 매개변수1가 포함된 값;
  속성2: 매개변수2가 포함된 값;
  속성3: 매개변수3가 포함된 값;
}

.box {
  @include 믹스인이름 (인수1, 인수2, 인수3)
}

위와 같은 형태가 기본적인 형태라 할 수 있다.
원하는 스타일을 인수에 넣어주어 능동적인 스타일을 입힐 수 있다.
매개변수를 3개 선언했는데, 인수가 2개만 입력되었다면 에러가 난다!!
(default값 설정에서는 얘기가 다르지만 우선은 이 정도로..)

아래는 실제로 작성할만한 믹스인의 예시이다.

@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 
//background관련 스타일 코드가 들어있다.
//mixin의 인수에 따라 조금씩 다른 스타일링이 가능하다.

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat, center, center);
}

.box-one {
  @include image-style(url("/images/poster1.svg"), cover, no-repeat, 40%, 50%);
}

위와 같이, 배경으로 이미지를 넣긴 하지만 각각 다른 이미지를 넣고 사이즈와 포지션등을 다르게 적용해주는 사례이다.

1.3.1 default 값 설정

@mixin f-style ($f-sz : 18px, $f-wt : 500, $l-ht : 1.5) {
  font-size: $f-sz;
  font-weight: $f-wt;
  line-height: $l-ht;
}

a {
  @include f-style
}

/* css */
a {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

위에서는 매개변수와 인수의 갯수가 맞지 않으면 에러가 난다고 했다.
그러나 기본 값을 설정해주면, 인수 갯수가 맞지 않아도 에러가 없이 컴파일된다.
설정방식은 간단하다.
매개변수의 옆에 콜론:을 작성하고 기본값을 입력해준다.

1.4 Content (추가 스타일)

// 정의하는 곳에서
@mixin sample {
  display: flex;
  justify-content: center;
  align-items: center;
  @content
}

// 사용하는 곳에서 (추가로 스타일링을 할 수 있음)
a {
  @include sample {
    color: white;
  }
}

// 물론 이렇게도 가능 중괄호에 유의하며 코드를 볼 것!!!!!
@mixin sample {
  display: flex;
  justify-content: center;
  align-items: center;
  //@content 선언 하지 않음
}
a {
  @include sample;
  color: white;
}

2. Extend??

불필요한 코드의 반복 작업을 줄여줄 때 사용된다.
mixin과 성격이 유사해보이나, 차이점이 있다.

중앙정렬 vs 드롭다운 메뉴바
글자크기, 줄간격 vs 모달창

전자와 후자의 차이를 조금이나마 느낄 수 있다면, 반은 성공한 것이다.

전자의 경우 어떤 요소에서든 사용이 될 수 있다.
하지만 후자의 경우 메뉴바라는 특정한 요소, 모달이라는 특정한 요소
즉, 관련된 요소에서 재사용이 되는 것이다.

전자처럼 어디에서나 쓸 수 있고 재사용을 하려면 믹스인을,
후자처럼 관련된 요소에서 재사용을 하려면 익스텐드를 사용한다.

~~(감만 익히도록 하자...)~~

2.1 Use extend

class 이름 가져오기

말 그대로 이전에 사용된 스타일이라면, 해당 클래스 이름을 가져오는 것이다.

// Scss
.profile-user {
    background-image: url("../assets/user.jpg");
    background-size: cover;
    background-position : 50% 50%;
    border-radius: 50%;
    width : 50px;
    height : 50px;
}

.comment-user {
    @extend .profile-user;
}

위와 같이 앳 사인과 이전의 클래스의 이름을 가져오면 스타일이 동일하게 적용된다.

%placeholder 사용하기

%placeholder는 일종의 믹스인과 방식이 유사하다.
믹스인 선언을 해주고 인클루드로 불러오는 것처럼,

%로 선언을 해주고 익스텐드로 불러온다.

// Scss
%base-button {
    width: 133px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 10px;
}

.follow-button {
    @extend %base-button;
    background-color: #ffffff;
    color: #ff375f;
    border: 3px solid #ff375f;
}

.message-button {
    @extend %base-button;
    background-color: #ff375f;
    color: white;
}