본문으로 바로가기

[Chapter 05] Sass Mixin 응용

category StyleSheet/SASSㆍSCSS 2015. 9. 1. 17:59



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


'StyleSheet > SASSㆍSCSS' 카테고리의 다른 글

[Chapter 01] Sass  (0) 2015.10.27
Sass 활용(웹폰트,PX2EM, accessivility )  (0) 2015.09.14
[Chapter 07] Sass 조건문, 반복문  (1) 2015.09.08
Sass 명령어 기초 배우기  (0) 2015.08.07
SCSS/SASS(CSS Preprocessor) & Sass install  (4) 2015.08.06