SCSS 문법 #1

중첩

.container {
	ul {
			.name {
					color: royaalblue;	
					}
			.age {
					color: orange;		
				}
		}
}

주석

• /* */ : 기존 CSS 주석
• // : SCSS 주석 → complile 시 코드 사라짐

상위 선택자 참조

SCSS

.btn {
	position: absolute;
	&.active {
		color: red;   }}

CSS

.btn.active {
color: red;
}

중첩된 속성

네임스페이스가 동일할 경우 속성을 중첩하여 작성 가능

font: {
	weight: bold;
	size: 10px;
	family: sans-sefif;
};

변수

사용할 변수명 앞에 $ 사용

.container {
	 $size: 200px;
		top: $size;
		.item: 100px;
		width: $size;
		height: size; }
	}

산술 연산

• / → 나머지 연산이 아닌 단축 속성
  ~ 나머지 연산으로 적용
  1) () 사용
  2) 다른 연산자와 사용
  3) 변수와 사용
• calc() - 다른 단위의 산술 연산이 가능한 함수

Mixin

@mixin Center ($size) {
		display: flex;
		justyfy-content: center;
		width: $size;
		color: $color;  }

.container(200px) {
		@include Center;
}
.container($color: green) {
		@include Center;
}

$color: green → 키워드 인수