실무에서 자주 쓰는 SCSS @mixin 모음

SCSS에서 제공하는 @mixin 기능으로 자주 쓰는 속성 묶음을 선언해두고 필요할 때 불러오면, 반복되는 css 스타일을 아주 손쉽고 간편하게 작성할 수 있습니다👍

실무에서 자주 사용하는 @mixin을 정리한 포스트입니다.

공통

가상클래스

@mixin pseudo($content, $width, $height) {
    content: $content;
    display: block;
    width: $width;
    height: $height;
}

//scss
.item{
	color: red;
    
    &::before{
    	$size: 24px;
		@include pseudo('', $size, $size);
    }
}

//css
.item{
	color: red;
}

.item::before{
	content: "";
	display: block;
	width: 24px;
	height: 24px;
}

position center

@mixin positionCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//scss
.item{
	@include positionCenter;
}

//css
.item{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

flex vertical center

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

//scss
.item{
	@include flexCenter(space-between);
}

//css
.item{
	display: flex;
    justify-content: space-between;
    align-items: center;
}

text ellipsis

@mixin ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


@mixin ellipsisMulti($line) {
    display: -webkit-box;
    -webkit-line-clamp: $line; // 여러줄 이상 ellipsis
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
}

//scss
.item{
	&__title{
    	@include ellipsis;
    }
    
    &__sub{
    	@include ellipsisMulti(2);
    }
}

//css
.item__title{
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.item__sub{
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
}

scrollbar custom

@mixin scrollbar($size) {
    &::-webkit-scrollbar {
        width: $size;
        height: $size;
    }

    &::-webkit-scrollbar-button {
        width: 0;
        height: 0;
    }

    &::-webkit-scrollbar-thumb {
        background-color: $c-bf;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
        background-color: $c-fa;
    }

    &::-webkit-scrollbar-button:start:decrement,
    &::-webkit-scrollbar-button:end:increment {
        display: none !important;
        width: 0;
        height: 0;
    }
}

mediaQuery

@mixin laptop {
    @media (max-width: 1400px) {
        @content;
    }
}

@mixin tablet {
    @media (max-width: 1100px) {
        @content;
    }
}

@mixin tablet-sm {
    @media (max-width: 768px) {
        @content;
    }
}


@mixin mobs {
    @media (max-width: 500px) {
        @content;
    }
}

크로스브라우징

@mixin safari-mac {
    @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) {
            @content;
        }
    }
}

@mixin ios {
    @supports (-webkit-touch-callout: none) {
        @content;
    }
}

@mixin firefox {
    @-moz-document url-prefix() {
        @content;
    }
}

//scss
@include safari-mac {
	.itemMac {
    	color: red;
    }
}

.itemFireFox {
	padding: 16px;
    @include firefox {
        padding: 8px;
    }
}


//css
.safari-mac{
	@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
	@supports (-webkit-appearance: none) {
		.itemMac {
				color: red;
            }
        }
    }
}

.itemFireFox{
	padding: 16px;
}

@-moz-document url-prefix() {
	.itemFireFox {
		padding: 8px;
	}
}