sass, @MIXIN 모음

SASS에 대해 다른 프로젝트들을 뜯어보니, 대개 사용하는 MIXIN도 정해져있는 것 같다. 앞으로 사용할 만한것, 쓸만한 MIXIN들을 모아 두자

/* 클리어 */
@mixin clear{
    &:after{content:'';display:block;clear:both;}
}
/* 말줄임표 */
@mixin ellipsis($w, $display) {
    width:$w;
    overflow:hidden;
    display:$display;
    text-overflow:ellipsis;
    white-space:nowrap
}
/* 미디어 쿼리 */
//모바일
@mixin mobile {
    @media screen and (max-width: #{$breakpoint-mobile}) {
		@content;
	}
  }
//테블릿
@mixin tablet {
    @media screen and (max-width: #{$breakpoint-tablet}) {
		@content;
	}
  }
//데스크탑
@mixin desktop {
	@media screen and (min-width: #{$breakpoint-desktop}) {
		@content;
	}
}