Sass 단축속성 과 $로 상위 선택자 참조

1.Sass의 단축속성

단축 속성은 같은 주제를 가진 여러 공통 속성을 묶기 위해 정의하는 속성이다.
대표적으로 font가 있으며 그 외 background 등이 있다 아래와 그 예는 아래와 같다.

<-- 대표적인 단축속성인 font 일반 CSS에서의 사용법 -->
font-family : sans-serif;
font-size : 10px;
font-style : normal;
font-weight : bold;

위와 같은 단축 속성을 Sass에서는 다르게 사용 할 수 있는데 그 사용법은 아래와 같다.

<-- 대표적인 단축속성인 font 일반 Sass에서의 사용법 -->
font : {
family : sans-serif;
size : 10px;
style : normal;
weight : bold;
<-- 이러한 표현법을 다른 말로 '네임스페이스 속성 중첩'이라 한다. -->
}

물론 위와 같은 네임스페이스 속성 중첩이 아닌 기존의 CSS 방식으로 사용하는것도 가능하다.

2. &를 사용한 상위 선택자 참조

Sass에서는 &를 사용하여 상위 선택자를 참조 가능하다.

<-- 기존 -->
.clickBtn{
...
}
.clickBtn:active{
background-color : black;
}

<-- &를 사용 -->
.clickBtn{
	&:active{		
    	background-color : black;
	}
}

이처럼 .clickBtn의 밖에서 다시 선언하는 것이 아닌 .clickBtn의 안에서 &를 사용하여 참조 할 수 있다.