• SCSS와 Sass는 모두 CSS의 확장 기능을 제공하는 CSS 전처리기이다.
• 두 가지 모두 변수, 중첩 규칙, 믹스인, 상속 등과 같은 기능을 제공하여 CSS 코드를 더욱 효율적으로 작성할 수 있도록 도와준다.
• 보통은 css문법과 더 유사한 Scss를 사용한다.

SCSS 장점

문법

변수

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

중첩

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

재활용(Mixins)

//선언 @mixin
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
//사용 @include
.container {
  @include center;
  .box {
		 @include center;
	 }
}

@mixin theme($theme: DarkGray,$color:#fff) {
// 함수처럼 매개변수 받아서 사용가능. (a,b)여러개 지정가능
// :DarkGray를 사용하여 $theme의 기본값 설정
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: $color;
}

.info {
  @include theme; 
}
//.alert {
//  @include theme(DarkRed,#000);
//}
.alert {
  @include theme($theme: DarkRed); //"$theme:"을 사용하여 전달값 지정가능.
}
.success {
  @include theme($color: green);
}