SCSS의 변수 사용법

SCSS 변수 선언

$변수명: 변수의 값;

이 변수는 CSS 스타일시트에서 반복적으로 사용되는 값들을
재사용하기 위해 선언하고 사용할 수 있는 기능을 제공합니다.

간단예제

$white: #fff;

.white{
	color: $white;
}

$font-size-base: 10px;
$padding-base: 10px;

사용방법

//변수 선언
$color: #000;
$font-size-base: 10px;
$padding-base: 10px;

//변수 사용
body{
	font-size: $font-size-base;
	color: color;
	padding: $padding-base;
}

SCSS 중첩 규칙 이해 및 활용

중첩규칙
중첩규칙은 CSS 선택자를 HTML의 구조와 유사하게 SCSS에서 표현할 수 있게 해줍니다.
이는 마크업 구조를 CSS에 직관적으로 반영할 수 있게 하여, 코드의 가독성과 유지보수성을 올려줍니다.
중접규칙을 사용하면, 상위 선택자를 반복해서 작성할 필요 없이, 관련 스타일을 그룹화하여 표현 할 수 있습니다.

nav{
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	li { display: inline-block; }
	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
		}
	}
	
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	nav li {
		display: inline-block;
	}
	nav a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}

SCSS의 장단점

• 장점: 스타일 시트를 더 가독성 있고 유지 보수하기 쉽게 만들 수 있습니다.
• 단점: 전처리기를 위한 도구 필요!, 컴파일 시간 소요