Sass 변수 생성

// 변수 선언
$kyusik: 1;
$kyusik-2 : 12;
$KYUSIK: 2;
$KYUSIK_2 : 12;

$hongsi : color 200ms ease-in-out;

$hongsi : url('./helloworld');

p {
	transition : $hongsi
}

모든게 변수가 될 수있다.

Sass도 스코프가 있다.

색상을 변수에 담기

맨날 hex code를 피그마에서 복사 붙여넣기 복사 붙여넣기를 반복하지 않을꺼다.

디자이너가 선택한 색상코드들은 변하지않은 상수이지만…….

<aside> 💡 회색 색상을 디자인을 보고 분석해보자…. 이름을 정할때.

</aside>

타이포그래피를 변수에 담기

// _typography.scss

$font-size-12: 12px;
$line-height-12: 16px;
$letter-spacing-12: -0.005em;

$font-size-13: 13px;
$line-height-13: 20px;
$letter-spacing-13: -0.01em;

$font-size-14: 14px;
$line-height-14: 24px;
$letter-spacing-14: -0.01em;

$font-size-16: 16px;
$line-height-16: 24px;
$letter-spacing-16: -0.01em;

$font-size-18: 18px;
$line-height-18: 28px;
$letter-spacing-18: -0.02em;

$font-size-24: 24px;
$line-height-24: 34px;
$letter-spacing-24: -0.01em;

// _reset.scss

* {
  margin: 0;
  font-family: $font-main;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

html {
  font-family: $font-main;
  font-size: $font-size-16;
}

body {
  font-family: $font-main;
  color: $primary;
}

// 폰트를 더 부드럽게 만들어주는.
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

그리드 시스템

<aside> 💡 디자이너가 준 그리드 시스템을 보고 어떻게 의도대로 움직일지 파악을 하자.

</aside>

모바일에서 그리드를 사용할때 unit은 pixel이 아닌 %로 따진다.