중첩 : 캐스케이딩
cascading : 위에서 아래로 흐르는
SCSS를 사용하면 사진과 같이 부모의 대괄호{} 안에 자식 선택자를 넣을 수 있다!
부모참조 &
&를 붙이면 부모 선택자가 그대로 출력됨.
중첩과 같이 사용하면서,
부모 선택자에 특정 클래스를 붙이거나, header.active
부모 선택자의 이름 뒤에 부가적인 이름을 붙이거나 header--blue
가상 클래스(:hover)를 붙이거나, .item:hover
선택자를 붙이거나!__ .item + .item
.gnb-list 안에서 .m-gnb &와 같이 &를 뒤에도 붙일 수 있는데, 이 경우 &(여기서는 .gnb-list)의 부모 선택자를 지정해줌! .m-gnb .gnb-list
변수
변수를 얘기하기 전!
@media와 같은 at-rules 또한 중첩이 가능하므로 보다 편하게 조건을 추가할 수 있다!
SCSS에서는 $변수명: 값; 으로 변수를 선언해 사용할 수 있다!
CSS에서는 :root { --변수명: 값; } 으로 작성 후 사용시 var(--변수명) 형태로 불러옴
전역 변수와 지역 변수
선언 위치에 따라 전역 변수 또는 지역 변수로 사용할 수 있음!
$font-size라는 변수는 .header의 지역 변수로 선언되었으므로, .section01에서는 에러가 나는 걸 확인할 수 있음.
SCSS 변수와 CSS 변수의 차이점!
- SCSS 변수는 컴파일되면서 사라짐 -> CSS 파일에서 보이지 않아요!
- SCSS 변수는 한 번에 하나의 값만 가짐!
- SCSS 변수는 재할당 시 이전의 내용을 바꾸지 않아요!
하이픈과 언더바
SCSS변수에서는 언더바(_)와 하이픈(-)을 동일하게 취급!
사진과 같이 동일한 취급을 하므로 하이픈의 값으로 재할당되어 200px로 나오는 것!
보간법
변수를 문자열로써 불러와 사용할 때의 방법!
#{} 안에 변수를 적어준다. ex) #{$header-height}
보간법을 사용할 때, 변수의 값은 "문자열"로써 출력되므로 주의할 것!
주석
SCSS 주석은 // 를 사용해 작성하는데 이는 컴파일 후의 CSS 파일에서 보여지지 않는다.
참고: nana님 블로그
