[Sass/SCSS] 변수 만들기

#1. 사용법

1. scss 파일에서 다음과 같은 형태로 넣어준다.

$name: value;
// $변수명: 값;

 

* 이름지을때 유의사항

- 알파벳,-,_ ,숫자 사용가능
- 대소문자 구분함
- 변수명 숫자로 시작하지 말아야함.

- 보통 아래 두가지 조합 많이 사용함 (강요적인건 아니니까, 회사에서 쓰는 방식에 따라 사용하는게 좋음)
  1) sass에서는 보통 소문자로,- 조합

  2) 대문자로 _ 조합

$color-red: red;    // 1. 소문자 - 조합
$COLOR_BLUE: #0000ff;   // 2. 대문자 _ 조합

 

2. scss 에서 변수가 필요한 곳에 그대로 사용하면 된다.

$color-red: red;    // 1. 소문자 - 조합
$COLOR_BLUE: #0000ff;   // 2. 대문자 _ 조합

p {
  color: $COLOR_BLUE;
}

span {
  color: $color-red;
}

 

 

#2. 특징

1. 정의된 변수는 css에 따로 컴파일 되진 않는다.

- 작성된 변수를 사용할때, 변수에 저장된 값으로 컴파일 된다.

변수는 따로 컴파일되지 않는다.  p , span을 값을 변수로 적었지만 css에는 정의된 값으로 컴파일 된다.

 

적용된 화면