[SASS] 반응형 디자인: @mixin / Responsive Mixins(@content)

 

 
 

📌 @mixin

• 일종의 function
• @include와 함께 사용한다.
• 값을 인자(argument)로 전달하여 태그마다 값을 다르게 지정할 수 있음

 
 

🔺 선언하기

@mixin 변수명($인자) {
      공통 코드
}

• 인자는 여러 개 전달 가능 O

 
 
 

🔺 사용하기

selector {
   @include 변수명(인자값);
}

• @include를 사용하여 인자(argument)를 보내고 function을 불러온다.
• 인자는 다르게 부여할 수 있음

@mixin alert($bgColor, $borderColor) {
    background-color: $bgColor;
    margin: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px dashed $borderColor;
}

.success {
    @include alert(green, blue);
}

.error {
    @include alert(tomato, white);
}

.warning {
    @include alert(yellow, black);
}

 
 
 

---

 
 

📌 Responsive Mixins

• mixin에 content를 전달한다.

 
 

🔺사용하기

1. mixin 안에 @content를 추가한다.

• @content는 mixin의 content 안에 있는 것을 모두 @content 자리에 나타낸다.

@mixin 변수명($인자) {
       공통 코드
       (속성: $인자;)
 
      @content
}

 
 

2. 셀럭터 안의 @include를 {중괄호}로 열고 속성(content)를 작성한다.

selector {
    @include 변수명(인자값1, 인자값2...) {
         content (ex. font-size: 12px;)
    }
}

@mixin alert($bgColor, $borderColor) {
    background-color: $bgColor;
    margin: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px dashed $borderColor;
    @content;
}

.success {
    @include alert(green, blue) {
        font-size: 12px;
    }
}

.error {
    @include alert(tomato, white) {
        text-decoration: underline;
    }
}

.warning {
    @include alert(yellow, black) {
        text-transform: uppercase;
    }
}

 
 
 
 

---

 
 

📌 반응형 디자인 만들기

 
 

• variable 추가 👉 기기의 화면 크기를 나타냄
• 미디어 쿼리(media-query)를 만들고 요소(element) 안에서 include가 가능하다.

$breakpoint-sm: 480px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1200px;


@mixin smallDevice {
    @media screen and (min-width: $breakpoint-sm) {
        @content;
    }
}

@mixin mediumDevice {
    @media screen and (min-width: $breakpoint-md) {
        @content;
    }
}

@mixin largeDevice {
    @media screen and (min-width: $breakpoint-lg) {
        @content;
    }
}

@mixin xlDevice {
    @media screen and (min-width: $breakpoint-xl) {
        @content;
    }
}

body {
    @include smallDevice {
        background-color: blue;
    }

    @include mediumDevice {
        background-color: red;
    }

    @include largeDevice {
        background-color: purple;
    }

    @include xlDevice {
        background-color: pink;
    }
}

 
 
 

---

 
 

출처

노마드코더 CSS Layout 마스터클래스