[sass] 사스공부해보기 nesting

사스에는 중첩이라는 개념이 있다.

 

프로젝트때 css 하면서 제대로 css 를 써본건 처음이였는데 이름을 잘지어놧다고 생각을 했는데도 찾다가 집중력 소진되는 때가 아주 많았다.

 

그리고 html 은 구조가 있고 그 구조를 에 맞게 select 할수 있어서 이용하는데는 어려움은 없지만 그거를 사용하는데에는 조금 귀찮은? 특히 팀원 코드를 나중에 내가 코딩할때는 찾기 빡세다 뒤로갈수록 추가되기도하고 많아지니까

 

근데 이번에 scss 공부하다가 보니까 scss 에서는 구조적으로 css 를 꾸릴수 있고 그거를 nesting 이라고 한다고 하더라 

예시들을 살펴보자

 

일단요약부터 해보면

1.구조를 중첩해서 사용할수있다.

좌측은 scss 파일이고 오른쪽은 컴파일된 css 파일이다.

 

해당 scss 블락안에서 구조를 중첩해서 사용할 수있다 그안에서 & 기호는 블락안에서 최상위 셀렉터를 나타낸다. 

따라서 & > a 는 #box1 > a 형태로 컴파일 된다.

& 기호가 없이 그안에서 a 만 써주면 컴파일 한다면 box1안의 모든 a를 가리키는 #box1 a 형태로 컴파일 된다.

 

2.중첩구조 안에서 네이밍도 대신할수있다.

id box1 안에 id box1-title 이라는 아이디를 가진 것을 가져오고 싶을 때 이런식으로 네이밍도 대체할수가 있다.

네이밍도 구조적 으로 해주는 경우에 더욱 유용하게 사용할수 있게되는기능이다.

 

3.반응형 작업도 훨씬 직관적으로 진행할수있다.

미디어 쿼리 이거 반응형 나중에 하다가 보면은 굉장히 코드가 지저분 해지는데 수정할때 매우 힘들었던 기억이 있는데 

아 이걸 이제 알았네

 

 

전체적으로 훨씬 직관적이라서 좋은거 같다 

다음에는 중복제거해줄수 있는 사스기능을 살펴보자