[SASS] 중첩과 특수 선택자

중첩

---

중첩은 CSS의 문법을 응용하여, 선택자나 속성의 관계를 중첩 형태로 풀어낸 문법.

 

규칙 중첩

부모 선택자를 반복하지 않고 중첩해서 사용할 수 있다.

 

속성 중첩

css 속성 중 네임스페이스로 묶인 속성이 있다. 예로 들면 font-, margin-...

.box{
    font:{
    	family:Gothic;
        size:30em;
        weight:bold;
    };
    margin:{
    	top:50px;
        left:40px;
    };
    padding:{
    	top:20px;
        right:20px;
    };
}

 

특수 선택자

---

Sass는 css 선택자의 모든 형태 외에 특수 선택자를 제공한다.

 

부모 참조 선택자 &

& 키워드는 상위(부모) 선택자를 참조하여 치환한다.

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

.list{
	li{
    	&:last-child{
        	margin-right:0;
        }
    }
}

& 키워드가 참조한 상위 선택자로 치환되는 것이기 때문에 다음과 같이 응용도 가능하다.

SCSS :

.fs{
    &-small{
    	font-size:12px;
    }
    &-medium{
    	font-size:14px;
    }
    &-large{
    	font-size:16px;
    }
}

 

compiled to :

.fs-small{
	font-size:12px;
}
.fs-medium{
	font-size:14px;
}
.fs-large{
	font-size:16px;
}

 

 

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.