SCSS 문법 이해하기

 

 

1. 변수(Variables)

$ 이용 변수 선언, 자주 사용하는 색상, 글꼴등을 변수에 등록하여 변수명 호출로 이용할 수 있습니다.

같은 값을 반복해서 적지 않아도 되므로 코드를 간결하게 만들 수 있습니다.

• 변수명은 의미적으로 작성합니다. ex) font_size, primary_color
• 변수명은 $으로 시작합니다.
• 변수명은 소문자로 작성하며 여러단어가 합쳐진 경우 -, _를 사용합니다.

$primary-color:#ff0
nav {background-color:$primary-color}
nav a {color:$primary-color}

 

 

2. 중첩 규칙(nesting)

부모 요소의 선택자를 반복적으로 적을 필요 없이 태그 관계처럼 구성이 가능합니다.

코드의 가독성을 높이고 들여쓰기를 통해 쉽게 파악할 수 있게 합니다.

nav {
	ul {
		margin:0; padding:0;
	}
}

 

 

3. 믹스인(Mixins)

CSS 규칙 재사용 가능한 스타일 규칙을 정의하여 이용할 수 있습니다.

mixin키워드 이용 정의 후 include 키워드로 호출합니다.

코드의 중복을 줄이고 유지보수를 용이하게 만듭니다.

@mixin text-truncate {
	overflow:hidde;
	text-overflow:ellipsis;
	whitep-space:nowrap;
}

.title { @include text-truncate; }

 

 

4. 상속(Extend)

extend 키워드 이용, 공통스타일을 부모 선택자에 정의하고 자식에게 상속 시킵니다.

button {
	border:none;
	border-radius:5px;
	padding:10px;
}

.submit-button { @extend button; }