[TIL] Sass - variables

1. Why Variables?!

변수를 선언한다 = 값을 일일이 작성하지 않는다

일정한 테마를 가진 웹 이라면, 배경색이나 헤딩의 폰트 사이즈, 본문의 폰트 사이즈 등등등 동일한 스타일을 줄 경우가 생긴다.(아주 많이)
이 때마다 그 값을 어딘가에서 보고 써넣거나, 복붙하기등의 행동은 효율성이 떨어진다.

변수를 활용하면 이러한 반복작업이 깔끔하게 해결된다.

2. 변수생성

$를 써서 변수를 생성한다.(선언한다.)

//색상
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;

//폰트사이즈
$font-p: 13px;
$font-h1: 28px;

//폰트
$base-font: 'Noto Sans KR', sans-serif;


.box {
  background-color: $bg-color;
  //css에서는 background-color: #3e5e9e;가 된다.
}

3. List & Map

변수의 값에 하나만 선언하지 않고 여러개를 쓸 수 있는데, 방식은 두 가지가 있다.

3.1 list

• 값들마다 순서가 있다.
• 이 순서를 인덱스라고 한다.
• 인덱스는 1부터 시작한다.

$color-palette: red, blue, green, black, yellow;

.box {
  color: nth(color-palette, 2) //blue!

따로 괄호를 넣어주지 않아도, 쉼표로 구분해주면 된다!!

3.2 map

map이란 값들이 들어있지만, key : value의 형태로 들어있는 것을 말한다.

$font-sizes: ("h1": 45px, "h2": 19px, "p": 16px);

section {
  h2 {
    font-size : map-get($font-sizes, "h2");// 19px
  }
}

map-get($font-size, "h3");// null h3란 key값이 없으므로!
map-get($font-size, "h1");// 45px

list와 달리, 괄호로 묶어주는 과정이 필요하다!!
불러오려면, map-get($map, "key"); 형태로 선언하면 된다.

4. Scope (유효범위)

유효범위란, 변수가 전체 문서에서 사용될지(전역변수), 중괄호 안에서만 사용될지(지역변수)를 의미한다.

4.1 지역변수

지역변수란 자신을 감싸고 있는 중괄호 내에서만 쓰이는 변수를 말한다. {}
중괄호 내에서 선언하면 된다.

.box {
  $f-color: #525252;
  color: $f-color;
  font-weight: 700;
  span {
    color: $f-color;
  }
}

이렇게 선언한 변수는 중괄호 내에서만 쓸 수 있으며, 다른 지역에서 쓰려고 선언하면 에러가 난다.

4.2 전역변수

전역변수란 문서 전체에서 사용되는 변수를 말한다.
가장 윗부분에서 선언해주면 문서 전체에서 사용할 수 있다.

$l-height: 22px;

.box {
  line-height: $l-height;
  color: red;
  span {
    line-height: $l-height;
    color: blue;
  }
}

위처럼, 문서의 상위에서 변수를 선언해두면 어느 지역에서도 쓸 수 있다.

5. Operator (연산자)

Javascript에 들어가면 연산자 공부는 정말 많이하게 될 것이다.
지금 수준에서 알아두면 좋을 것만 알아둔다.

5.1 비교연산자

> < >= <= 는 알고있는 그 의미 그대로이다.
(크다 작다 크거나같다 작거나같다)

연산의 결과는 true(1) or false(0)이다

=는 같다는 의미가 아니다.

==가 같다는 의미이고, !=가 같지 않다는 의미이다.

5.2 산술연산자

• a % b 는 a에서 b를 나눈 나머지 값을 구하는 연산자이다.
• string의 +

"string" + "-문자열" // "string-문자열"
string + -문자열 // string-문자열
"string" + -문자열 // "string-문자열"

문자열의 더하기 연산에서 기억할 것은 두가지.

• "string"과 string은 다르다
• 더하기 연산에서 둘 중 하나만 "문자열"이어도 결과는 "문자열"이 됨

이 정도만 알고 넘어간다.