변수

변수를 선언한다는 것은 값을 일일이 고치지 않아도 된다는 의미
유지보수를 매우 쉽게 만들어준다는 것

※ 변수 사용 기준

• 값이 두 번 이상 반복된다면 미리 변수로 만든다.
• 값을 기억하지 않고 변수명만을 가지고 스타일을 할 수 있다.
• 기존의 값을 다른 값으로 변경해야할 경우, 변수의 값만 변경하면 되기 때문에 값이 수정될 가능성이 있다면 변수 생성을 고려한다.

ex. 보통 타이포그래피, 폰트색상, 폰트사이즈, 글자 간격 등의 값을 변수로 정의해서 사용

생성하기

• $ 기호를 사용 => 스타일을 적용할 값(색상, 폰트 사이즈, 이미지url)을 저장

//$변수 : 값
$bgColor : #FFF

• css 전체에 걸쳐 반복되는 값들을 정의하면 편하게 스타일링을 할 수 있음

//색상
$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;

body{
		background-color : $bg-color;
		font-size : $font-p;
		font-family : $base-font;
}

h1{
   font-size : $font-h1;
	 color : $black;
}

p{
	font-size : $font-p;
	color : $black;
}

변수 type

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
• lists :

  //sass 공식문서
  $font-size : 10px 12px 16px; //폰트사이즈 리스트
  $image-file : photo_01, photo_02, photo_03 //이미지 파일명 리스트
  
  //아래와 같은 형태로 사용(순회도 가능)
  list.nth(10px 12px 16px, 2); // 12px
  list.nth([line1, line2, line3], -1); // line3

• maps :

//sass 공식문서
$font-weights: ("regular": 400, "medium": 500, "bold": 700); //글자 굵기 리스트

//아래와 같은 형태로 사용
map.get($font-weights, "medium"); // 500
map.get($font-weights, "extra-bold"); // null

Lists, Maps

Lists

리스트는 순서가 있는 값으로, 값마다 인덱스를 가지고 있다.
lists를 만들려면 lists의 요소들을 쉼표, 나 공백 또는 일관성이 있는 /로 구분하여 생성
다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식
빈 lists를 만들 때나 lists에 들어있는 값이 하나 인 경우 [ ] 나 ( ) 를 사용하여 생성

lists에 들어있는 값의 index는 0부터 시작하지 않고 1부터 시작

$sizes: 40px, 50px, 80px;
$valid-sides: top, bottom, left, right;

lists 관련 내장함수

append(list,value,[separator]), index(list,value), nth(list, n) 등

• append(list,value,[separator]) : lists의 값을 추가하는 함수
• index(list,value) : lists의 값에 대한 인덱스를 리턴하는 함수
• nth(list, n) : lists의 인덱스에 해당하는 값을 리턴하는 함수

순서대로 인덱스 1, 2, 3 혹은 -3, -2, -1

Maps

maps는 ( ) 괄호 안에 키:값의 형태로 저장하여 사용
키와 값을 정의할 때, 키는 고유해야 하지만 키에 해당하는 값은 중복이 가능 변수를 각각 선언하는 대신, 관련 있는 변수들을 한번에 모아 maps로 만들어서 사용

map관련 내장함수

map-get(map,key), map-keys(map), map-values(map) 등

• map-get(map,key) : 키에 해당하는 값을 값을 리턴하는 함수
• map-keys(map) : map에 들어있는 키(key) 전부를 리턴하는 함수
• map-values(map) : map에 들어있는 값(value) 전부를 리턴하는 함수

변경 되었다.

변수의 Scope(변수의 유효범위)

지역변수

지역변수는 선언한 자기자신을 감싸고 있는 중괄호 { } 안에서 사용
하위 단계에 있는 중괄호에서도 사용

.info{
	$line-normal : 1.34; // 지역변수
	font-size : 15px;
	line-height : $line-normal;
	text-align : right;
  span{
		line-height : $line-normal;
	}
}

h1에서 사용한 지역 변수를 p태그에도 사용해 보았을 때

에러 발생함

이 구조 일때,

내부 span에서는 사용할 수 있다

전역변수

전역변수는 가장 윗부분에 정의하면 파일 내에 어디서든지 사용가능

전역변수를 파일로 만들어서 사용하는 경우, 메인 scss파일(파일분할부분에서 설명한 style.scss파일)에서 전역변수파일을 다른 파일들보다 윗부분에 위치

//Scss
$font-p : 15px; // 전역변수

.main-box{
	p {
		font-size : $font-p;
	}
	a {
		font-size : $font-p;
	  color : blue;
		text-decoration : none;
	}
}

!global을 사용하여 local 변수를 global 변수로 만들어 사용

$mycolor: #ffffff !global;

Operator

비교연산자 (숫자형)

1️⃣ < , <=, >, >=

• a < b
• a <= b
• a > b
• a >= b

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

⚠️ERROR : 비교하거나 연산하는 값의 단위가 일치하지 않으면 에러 발생
그러나, 단위가 없는 숫자와 일반숫자와 비교하는 경우에는 에러 발생x

@debug 100px > 10s;
// Error: Incompatible units px and s

@debug 100 > 50px; // true
@debug 10px < 17; // true
// Not Error

2️⃣ ==, != (모든 타입)

• a == b : a가 b와 값이 같은지 확인
• a != b : a가 b와 값이 다른지 확인

변수의 타입에 따라 true, false결과가 다름
( == 의 연산자의 경우를. != 연산자는 반대의 값을 반환.)

• 색상, 숫자, 문자열은 값과 단위가 동일한 경우나, 값의 단위를 서로 변환했을 때 일치하는 경우 true를 반환.
• 맵은 키와 값이 모두 동일할 때, 리스트는 들어있는 값들이 모두 동일해야만 true를 반환.
• boolean의 경우, true == true, false == false,null == null 처럼 각자 자신과 비교할 때만 true를 반환.

// 숫자
@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

// 문자
@debug "Poppins" == Poppins; // true
@debug "Open Sans" != "Roboto"; // true

// 색상
@debug rgba(53, 187, 169, 1) == #35bba9; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

// 리스트
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true
@debug (5px 7px 10px) == (5px 7px 10px); // true

산술연산자 (숫자나 색)

• a + b
• a - b
• a * b
• a / b
• a % b

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in (1in == 96px)

※ 나누기를 할 때 사용하는 슬래시/는 리스트에서도 사용하기 때문에 혼동가능
그래서 괄호를 사용하거나, 변수와 함께 사용하거나, 덧셈을 할 때 함께 써서 Scss에게 / 를 나누기 연산자임을 알려주자

⚠️ERROR : 비교하거나 연산하는 값의 단위가 동일하지 않으면 에러가 발생

@debug 100px + 10s;
// Error: Incompatible units px and s.

String의 a + b

앞서 말했던 + 연산자에서 a와 b가 모두 문자열이라면 문자열 a, b 를 합쳐서 새로운 문자열로 반환
만약 a나 b중 하나만 문자열이라 하더라도 문자열이 아닌 값은 문자열로 변환하여 두 값을 합친 문자열로 반환

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif


@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

논리연산자 (불리언 타입)

• not : true이면 false를, false이면 true를 반환
• and : 두개 다 true일때 true를 반환하고, 하나라도 false면 false를 반환
• or : 두개 다 false면 false를 반환하고, 하나라도 true라면 true를 반환

@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false