# 2 SCSS-var

코알라코딩

●

scss

# 목차

1. 변수-[var]
- 1.1. 선언
- 1.2. 응용
2. 주석

# 1. 변수-[var]

공식문서-변수

https://sass-lang.com/documentation/variables/

변수를 만들 때는 $ 기호를 사용하여 스타일을 적용할 값(색상, 폰트 사이즈, 이미지url)을 저장한다.
//$변수 : 값 $bgColor : #FFF

사용가능한 자료형 numbers, strings, color, booleans, lists, null

numbers : 1, .82, 20px, 2em 등
strings : "./images/a.png", bold, left, uppercase 등
colors : green, #FFF, rgba(255,0,0,.5) 등
booleans : true, false
null

# 1.1. 선언

scss 폴더를 생성후 하위에 var.scss 파일을 생성한다

 root/
 │
 ├─basic.html
 ├─basic.css
 └─scss/
 	└─var.scss

아래의 코드를 작성한다.
컴파일 하기
- vscode 하단의 watch sass 를 클릭한다.
output 확인
- 이미지 처럼 파일 생성 결과가 출력되면 성공
html문서에 링크하기
- basic.html 문서를 열고 <head> 태그 사이에 css 폴더에 생성된 var.css 파일을 연결한다.

# 1.2. 응용

이제 html 문서에 선언한 변수를 활용해보자

scss 는 연산이 가능하다.

연산하는 값의 단위가 동일하지 않으면 에러가 발생할수 있다.

목적에 따라 calc 를 사용할 경우도 있다.

: 실행화면

Code

실행화면

scss/var.scss
//전역변수
$bg-color: #ff0;
$color-red: #ff0000;
$width100: 100px;
$per20: 20%;

header ul li {
	//지역변수
	$color-blue:#011f4b;
	flex: 1 1 30%;
	width: $width100 * 3;
	font-size: calc($width100 - 50px);
	a{color:$color-blue;}
}
body {
	background: $bg-color;
}
.box > .item > .para {
	color: #333;
	font-size: 24px;
	color: $color-red;
}

css폴더가 자동으로 추가되었으며 아래와 같이 컴파일되었다.

css/var.css
header ul li {
	flex: 1 1 30%;
	width: 300px;
	font-size: 50px;
}

body {
	background: #ff0;
}

.box > .item > .para {
	color: #333;
	font-size: 24px;
	color: #ff0000;
} /*# sourceMappingURL=01_var.css.map */

# 2. 주석

사스에서 주석은 아래와 같이 작성한다.

// 사스주석은 안보임
/*css주석은 컴파일에 보임*/
//네스팅: 둥지, 포함한,중첩되는 의미 : 포함관계를 적용한 작성법

var scss