SCSS(Sass) 믹스인 모음

1. 미디어쿼리

/*반응형 화면 크기*/
$mobile: 767px; //320
$tablet: 1023px; // 768
$desktop: 1200px; //1024

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

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

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

2. 말줄임

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

3. 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);}

포지션 등