$변수명 : 저장해서 사용할 값;

CSS에서의 :root와 유사하다.

Sass

$main-color : #2a4cb2;
$sub-color : #eee;
$large-size : 30px;

body {
  margin: 0;
  padding: 0;
  background-color: $main-color;
  color: $sub-color;
  font-size: $large-size;
  width: $large-size * 2;
}

CSS

body {
  margin: 0;
  padding: 0;
  background-color: #2a4cb2;
  color: #eee;
  font-size: 30px;
  width: 60px;
}

---

사칙연산시 calc()없이 가능

---

Nesting Syntax

Sass

.main-bg {
  width: 100%;

  h4 {
    font-size: $large-size;
  }
//.main-bg h4 같은 의미

  button {
    color: red;
  }
//.main-bg button 같은 의미 
}

CSS

.main-bg {
  width: 100%;
}

.main-bg h4 {
  font-size: 30px;
}

.main-bg button {
  color: red;
}

---

@extend Syntax

중복된 스타일들이 많다면, 클래스를 묶어놓고 필요한 위치에 @extend로 불러올 수 있다.

Sass

%btn {
  width: 200px;
  height: 200px;
  padding: 20px;
}

//임시클래스
//특징 : 단독으로 css파일로 컴파일되지 않는다.

.btn-green {
  @extend %btn;
  background-color: green;
}

.btn-red {
  @extend %btn;
  background-color: red;
}

.btn-blue {
  @extend %btn;
  background-color: blue;
}

CSS

.btn-blue, .btn-red, .btn-green {
  width: 200px;
  height: 200px;
  padding: 20px;
}

.btn-green {
  background-color: green;
}

.btn-red {
  background-color: red;
}

.btn-blue {
  background-color: blue;

---

@use Syntax, @mixin Syntax

Sass

//@use '파일경로';
//다른 파일에 있는 내용 가져오고 싶을 때 사용한다.
//다른 파일의 @mixin, $변수 등도 가져올 수 있다.
//다른 파일의 mixin, 변수를 쓰려면 앞에 파일명.$변수
//@include 파일명.mixin의 이름() 으로 활용하면 된다.
@use './reset.scss';


//@mixin syntax
//긴 코드를 짧은 단어로 축약할 떄 씀

//@mixin문법의 $파라미터
//긴 코드를 가변적으로 만들 때 씀

//글자 중간에 $변수나 $파라미터를 넣을땐
// #{ $변수명 or $파라미터 }

@mixin 폰트스타일($구멍, $구멍2, $구멍3) {
  font-size: $구멍;
  #{ $구멍3 }: $구멍2;
}

h2 {
  @include 폰트스타일(40px, 1px, width);
  color: reset.$메인칼라;
}

h3 {
  @include 폰트스타일(30px, -2px, padding);
}

h4 {
  @include reset.다른파일();
}


//컴파일하기 싫은 파일은 _파일명.scss로 작명해주면 된다.

CSS

body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

h2 {
  font-size: 40px;
  width: 1px;
  color: brown;
}

h3 {
  font-size: 30px;
  padding: -2px;
}

h4 {
  font-size: 10px;
  letter-spacing: -1px;
  color: red;
  padding: 0%;
  margin: 0;

_reset.scss

body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

$메인칼라 : brown;

@mixin 다른파일() {
  font-size: 10px;
  letter-spacing: -1px;
  color: red;
  padding: 0%;
  margin: 0;
}

---