[scss]배열, if문 축약형, 부트스트랩처럼 미디어쿼리 작성하기

scss 배열

$colors-arr : red, blue, yellow

$colors-arr : (
	"main" : red, 
    "sub" : blue,
    "emphasis" : yellow
    )

 

 

 

scss  if문 축약형

.bg-dark{
  color: if($name=="dark",#fff,inherit)
}

 

 

 

부트스트랩처럼 미디어쿼리 작성하기

// 각 미디어쿼리도 each로 쓰고싶었으나 실패함

$breakpoint-sm : "576px";
$breakpoint-md : "768px";
$breakpoint-lg : "992px";
$breakpoint-xl : "1200px";
$breakpoint-xxl : "1540px";

@mixin responsive-sm{
  @media (min-width: $breakpoint-sm){
    @content;
  }
}

@mixin display() {
  &-block{display: block !important;}
  &-inline{
    display: inline !important;
    &-block{display: inline-block !important;}
  }
  &-flex{display: flex !important;}
  &-grid{display: grid !important;}
}

.d{
  @include display()
}
  
@include responsive-sm(){
  .d-sm{
    @include display()
  }
}