function.scss

// ===== 텍스트 세로 중앙 정렬 2가지 방법 =====
// @방법1 : 부모에게 mixin 주고 인자로 클래스명 넘기기
// 장 : 알아보기가 편함? 
// 단 : 클래스 명을 넘길때 긴 클래스일 경우 불편함 
// component 명 전역화 해서 그걸 사용
$component-name : '.simple' !global;
@mixin vertical-center($classname...) {
  letter-spacing:-10px;
    &:before {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      content:'';
    }
  #{$classname} {
      display: inline-block;
      vertical-align: middle;
      letter-spacing:0;
  }
}
// *---예제
.a {
  // 전역변수를 좀더 간략하게 하기 위해 지역으로 사용
  $child : $component-name;
  @include vertical-center($child+'__a',$child+'__a','.a__c','.d');
}

// @2방법 : 부모와 자신에게 각각 주기 (parent와 child약자)
// 장 : include 부여가 자유로움
// 단 : 알아보기는 불편 
@mixin vertical-center-pa {
    letter-spacing:-10px;
    &:before {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        content:'';
    }
}
@mixin vertical-center-ch {
    display:inline-block;
    vertical-align:middle;
    letter-spacing:0;
}
// *---예제
.a1{
  @include vertical-center-pa();
}
.b1, .c1{
  @include vertical-center-ch();
}

// ===== rtl 만들기 =====
//인자에 순서를 맞춰야 한다? 스프레트 오퍼레이터를 가장 마지막으로
@mixin reverse-dir($box, $type:'pc', $num...){
}
// *---예제
.padding {
  // @include reverse-dir-pc(padding, 2 5 3 7)
}


// ===== label list =====
// @label로 만드는 list. 갯수, ul의 마진, li의 padding
@mixin ul-box($values...){
  @each $var in $values {
    margin:#{$var};
  }
}
@mixin label-list($count, $ul-box, $li-box){
  $width:();
  @if $count == '2' {
    $width : 50;
  }
  @else if $count == '3' {
    $width : 33.3;
  }
  @else if $count == '4' {
    $width : 25;
  }
  // @each $value in $ul-box {
  //   #{$property}: $px;
  //   $pc: append
  // }
  ul {
    // margin: #{$ul-box};
  }
  @include ul-box(#{$ul-box});
  // @each $value in $ul-box {
  //   ul {
  //     margin: #{$value};
  //   }
  // }
  li {
    width: $width#{'%'};
    padding: index($li-box, 3)#{'px'};
    box-sizing: border-box;
  }
}
// *---예제
.label-list{
  @include label-list('2', 0 -2,'0 3');
}




// 기타
@mixin post-link ($class, $color, $hover) {
    a#{$class} {
        color: $color;
    }
    a#{$class}:hover {
        color: $hover;
    }
}
.link {
  @include post-link('.link-a',red,blue);
}


@mixin after-bg($width, $height, $url, $type : 'pc') {
  @if($type == 'pc'){
      width : $width+px;
      height: $height+px;
  }
  @else if($type == 'mo'){
      width : $width+px;
      height: $height+px;
  }
  @else {
      @warn "type is 'pc' or 'mo'";
  }
  background: url($url) no-repeat center;
  background-size: 100% auto;
}

// ==== 퍼센트 계산기 ====
// @퍼센트니 당연히 인자는 숫자만 들어간다는 가정하에. 
@function percent-width($full-width, $content-width, $digit : 2) {
  $decimal-point: 100;
  @if($digit == 0){
    $percent : 1;
  }
  @else if($digit == 1){
    $percent : 10;
  }
  @else if($digit == 2){
    $percent : 100;
  }
  @else if($digit == 3){
    $percent: 1000;
  }
  @else {
    @warn "Decimal places are supported from 1 to 3";
  }
    @return round((($content-width/$full-width)*100%)*$decimal-point)/$decimal-point;
}