CSS - SCSS mixin

1. SCSS - Mixin 활용

1) Flex box

@mixin flex(
	$direction: row, 
	$justify: center, 
	$align: center, 
	$wrap: wrap) 
    {
      	display: flex;
        flex-direction: $direction;
        justify-content: $justify;
        align-items: $align;
        flex-wrap: $wrap;
	}

@mixin flex-center(
    $justify: center, 
    $align: center) 
    {
        display: flex;
        justify-content: $justify;
        align-items: $align;
    }

2) Position

@mixin position(
    $p: absoulte, 
    $t: null, 
    $b: null, 
    $l: null, 
    $r: null)
    {
        position: $p;
        top: $t;
        bottom: $b;
        left: $l;
        right: $r;
    }

3) Ellipsis - 말줄임

@mixin ellipsis($line: 1) {
    @if ($line == 1) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } @else {
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        word-break: keep-all;
    }
}

2. Etc

• Flex와 Position은 때에 따라 가로 or 세로 정렬, 가운데 정렬을 위한 mixin 활용 가능하다.
• 말줄임은 PC - M으로 넘어갈 경우 line-clamp만 1로 지정하는 것도 나쁘지 않은 것 같다.
  (프로젝트 진행할 때 문제 없었지만, 추후 확인 필요)