[Chapter 05] Sass Mixin 응용

Mixin(믹스인) 활용하기

# Scss
@mixin reset-html5-block($html5-block) {
  #{$html5-block} {
    display: block;
  }
}

# CSS
@include reset-html5-block('h1, p, div');

h1, p, div {
  display: block;
}

# Scss
@mixin reset-box-model {
  margin: 0;
  bottom: 0;
  padding: 0;
}
@mixin reset-font (){
  font:inherit;
  font-size: 100%;
  vertical-align: baseline;
}

@mixin nested-reset($html-selector) {
  #{$html-selector} {
    @include reset-box-model;
    @include reset-font;
  }
}


@include nested-reset('#demo-01 .reset, #demo-02');



# CSS
#demo-01 .reset, #demo-02 {
  margin: 0;
  bottom: 0;
  padding: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

전달 인자 기본값 설정(Args, Default Value) & 활용성이 향상된 '동적 믹스인'

ㆍ 믹스인 호출시 값을 전달하지 않아 오류가 발생하는 것을 방지하기 위해서 특정 값을 기본으로 설정할 수 있습니다.

ㆍ 기본값 설정 믹스인은 인자가 전달되지 않아도 기본값이 사용되기 때문에 오류를 방지할 수 있습니다.

ㆍ 동적인 믹스인은 전달된 인자에 따라 스타일 변경이 가능하기 때문에 활용성이 증대됩니다.

ㆍ 전달 인자 중, 특정인자만 선택하여 값을 전달할 수 있어 매우 유연하고,

ㆍ 특정 키워드를 지정해 믹스인에 인자 값을 전달할 수 있어 수정이 용이합니다.

scss

@mixin border-radius( $radius: 4px ) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
#app {
  @include border-radius;
}
#design {
  @include border-radius( 5px );
}

→ border-radius 믹스인 호출 시에 #app 에 사용된 믹스인과 같이 전달인자가 없으면 기본 값이 사용,대입됩니다.

scss

@mixin link-colors($text:blue, $hover:red) {
  color: $text;
  &:hover { color: $hover; }
}

a {
  @include link-colors($hover: green);
}

→ 전달인자중, 특정인자만 선택하여 값을 전달할 수 있습니다.

css

@mixin hover-link($padding-bottom: 2px, $border-bottom: 1px solid #767676) {
  text-decoration: none;
  &:hover, &:focus {
    padding-bottom: $padding-bottom;
    border-bottom: $border-bottom;
  }
}

a {
  @include hover-link($border-bottom: 1px dashed #6b6b6b);
}

→ 특정 인자 값만 전달 할 수 있습니다.

멀티 전달 인자, 유지보수 문제(Maintenance) 해결하기

css

@mixin box-shadow( $args1, $args2 ) {

  -webkit-box-shadow: $args1, $args2;
  -moz-box-shadow: $args1, $args2;
  box-shadow: $args1, $args2;
}
.box-double-shadow {
  @include box-shadow(2px 6px 10px #999, 0px 4px 5px #666);
}

→ 위 코드는 2개의 전달인자만 받을 수 있기 때문에 2개 이상의 박스 그림자를 설정해야 할 경우 믹스인을 수정해야합니다.

    이렇듯 전달할 인자의 개수가 고정된 경우는 응용,활용성이 떨어집니다.

css

@mixin box-shadow( $args... ) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

.box-double-shadow {
  @include box-shadow(2px 6px 10px #999, 0px 4px 5px #666, 2px 5px 5px #fff);
}

→ 믹스인의 가변전달인자로  List(배열타입)를 ...(dot 3개) 로 처리하면 복수의 인자를 손쉽게 처리할 수 있습니다.

CSS3 로 도형(원,삼각형) 믹스인 만들어보기

@mixin border-radius ($radius: 4px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin background-origin ($origin: padding-box) {
  -webkit-background-origin: $origin;
  -moz-background-origin: $origin;
  background-origin: $origin;
}

@mixin background-clip ($content: padding-box) {
  -webkit-background-clip: $content;
  -moz-background-clip: $content;
  background-clip: $content;
}

// 사용자 정의 믹스인: 원 도형 만들기
@mixin circle ($diameter: 10px, $bgcolor: black) {
  width: $diameter;
  height: $diameter;
  background: $bgcolor;
  @include border-radius($diameter/2);
  @include background-clip;
}

// 사용자 정의 믹스인: 삼각형 도형 만들기
// http://css-tricks.com/snippets/css/css-triangle/
@mixin triangle ($base, $direction, $bgcolor) {
  width: 0;
  height: 0;
  $half-base: $base/2;
  border: {
    left: $half-base solid transparent;
    right: $half-base solid transparent;
    bottom: $half-base solid $bgcolor;
  }
}

Jaehee's e-room