용이한 mixin 소스

chaewona·2023년 3월 12일
0

position


//position_1

@mixin position($position, $args: null) {
  position: $position;

  @if $args != null {
    $top-value: get-match-value-of-keys($args, top t);
    $right-value: get-match-value-of-keys($args, right r);
    $bottom-value: get-match-value-of-keys($args, bottom b);
    $left-value: get-match-value-of-keys($args, left l);

    z-index: get-match-value-of-keys($args, z-index z);
    top: if($top-value, unitless-px($top-value), null);
    right: if($right-value, unitless-px($right-value), null);
    bottom: if($bottom-value, unitless-px($bottom-value), null);
    left: if($left-value, unitless-px($left-value), null);
  }
}
/* 사용할 때 */
.usage {
  @include position(absolute, t 0 r 0 b 0 l 0 z 1000);
}
---------------Compiled------------------
.usage {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

//앱솔루트로 위치 설정

@mixin position-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@mixin position-vt{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
@mixin position-hr{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

말줄임 설정

//말줄임 설정

@mixin ellipse($line:1){
		/* **중첩 되는 소스**들을 기본 값 한줄로 선언해놓고 */
    overflow: hidden;
    text-overflow: ellipsis;
		/* 두줄 이상 이라면 */
    @if($line > 1){
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
		/* 두줄 이상이 아니라면(한줄이면) */
    @else{
        white-space: nowrap;
    }

}
*/* 사용할 때 */*
@include ellipse(n);

반응형

//반응형

/*반응형 화면 크기*/
$mobile: 767px; //320 최소를 보고 잡으세요
$tablet: 1024px; // 768 최소를 보고 잡으세요
$desktop: 1100px; //1025 최소를 보고 잡으세요

/*반응형, 브라우저 크기가 767px 이하일때*/
@mixin mobile{
  @media (max-width: $mobile){
    @content;
  }
}

/*반응형, 브라우저 크기가 768이상, 1024px 이하일때*/
@mixin tablet{
  @media (max-width: $tablet){
    @content;
  }
}

/*반응형, 브라우저 크기가 1025px 이상일때*/
@mixin desktop{
  @media (max-width: $desktop){
    @content;
  }
}

border-radius

//border-radius

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

.box {
    @include border-radius(10px);}
profile
화이팅

0개의 댓글