SASS 문법 - $변수명 , @mixin +@include, @extend, @use

1. $변수명 

2. @mixin 변수명($파라미터)   + @include 변수명(내가설정한값)

$변수명 및 @mixin 예시

$defaultFontSize : 25px;
$defaultFontColor : rgb(41, 41, 41);


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


.box {
  margin: 12px;
  li {
    @include listBorderStyle(100px);
    padding: 20px;
    font-size: $defaultFontSize +5px;
    color: $defaultFontColor;
    @include  flexLeftAlign(column);  
  }
 }

 

3. @extend  로 기존 클래스 변형

.alert-box-green{
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #eee;
  color :white;
  background-color: green;
}

.alert-box-brown {
  @extend .alert-box-green;
  background-color: orange;
}

.alert-box-blue {
  @extend .alert-box-green;
  background-color: blue;
}

 

4.  import 역할하는 @use

@use 'reset.scss';

컴파일 할 필요없는 파일들은 '_파일명.scss'로 만들면 컴파일 하지 않는다.

.scss 확장자 생략해줘도 import 된다.

import한 파일 내에 있는 @mixin $변수 들을 사용할 수 있다.

사용하려면 가져온 파일명.$변수 이렇게 사용한다.

ex) reset.$mainColor , reset.flexLeftAlign(100%)