Mixin, Include 1

재활용(Mixins)

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

우선, Mixin은 두 가지만 기억하면 된다.
선언하기(@mixin)와 포함하기(@include) 이다.
만들어서(선언), 사용(포함)하는 것이다!

--> 즉, mixin로 공유할 정보를 입력하는것이고 include를 이용해서 mixin의 정보를 가져와서 사용하는것이다.

 

@mixin

기본적인 Mixin 선언은 아주 간단하다.
@mixin 지시어를 이용하여 스타일을 정의한다.

 

 

1. 매개변수로 값을 받아오기 

// SCSS
@mixin 믹스인이름 (매개변수) {
  스타일;
}

// Sass
=믹스인이름
  스타일

@mixin size($w, $h) {
    width: $w;
    height: $h;
}

.box1{
    @include size(100px, 100px);
}

.box2{
    @include size(200px, 200px);
}

.box3{
    @include size(300px, 300px);
}

.box1 {
  width: 100px;
  height: 100px;
}

.box2 {
  width: 200px;
  height: 200px;
}

.box3 {
  width: 300px;
  height: 100px;
}

mixin에서 사용할 내용을 선언하는데, 중괄호 안에는 선언되어있는 초기값이 하나도 없어도, 매개변수로 받아와서 중괄호 안에있는 변수들의 값을 선언 할 수 있다.

 

 

 

 

2. 매개변수로 값을 정의하기

@mixin size($w : 100px, $h: 100px) {
    width: $w;
    height: $h;
}

.box1{
    @include size;
}

.box2{
    @include size;
}

.box3{
    @include size;
}

.box1 {
  width: 100px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
}

.box3 {
  width: 100px;
  height: 100px;
}

mixin에서 사용할 내용을 선언하는데, 중괄호 안에는 선언되어있는 초기값이 하나도 없어도, 소괄호안에 있는 매개변수로 값을 정의 할 수 있다.

 

 

 

3. 특정값 재정의 가능

@mixin size($w : 100px, $h: 100px) {
    width: $w;
    height: $h;
}

.box1{
    @include size;
}

.box2{
    @include size(200px, 200px);
}

.box3{
    @include size($h: 300px);
}

.box1 {
  width: 100px;
  height: 100px;
}

.box2 {
  width: 200px;
  height: 200px;
}

.box3 {
  width: 100px;
  height: 300px;
}

box2클래스에서는 매개변수를 한꺼번에 2개를 입력해서 width, height값을 변경했고, box3클래스에서는 특정값 height만 선언해서 그 값만 변경을 했다.