SCSS에도 연산자가 있다…!

기본적인 문법은 일반적인 프로그래밍 문법과 같다.

div {
	width: 20px + 20px;
	height: 40px - 10px;
	font-size: 10px * 2;
	margin: 30 / 2;
	padding: 20px % 7;
}

⚠️ 참고로 나누기는 그냥 사용하면 제대로 동작하지 않는다.

왜냐하면 CSS의 단축 속성을 나타내는 문법 / 과 같기 때문이다.

따라서 SCSS에서 제대로 나누기를 적용하려면 반드시 나누려는 대상을 () 으로 묶어준다.

SCSS의 연산자 우선순위는 일반적인 상식과 같다.

⚠️ 산술 연산을 진행할때는 피 연산자의 단위가 동일해야 한다.

다만 calc()함수를 이용하면 단위가 다른 피연산자 사이 연산이 가능하다.

width: calc(100% - 200px);