Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ## SASS & 의 의미
- ### &가 앞에 있을때
- - `&`를 이용하여 a 선택자와 연동되어 처리하는 것
- - 선택자끼리 묶어주는 역할
- ```css
- .select {
- padding: 20px;
- a {
- color: red;
- text-decoration: none;
- &.hover {
- text-decoration: underline;
- }
- }
- }
- ```
- 위의 `scss`를 `css`로 바꾸면 아래와 같다.
- ```css
- .select {
- padding: 20px;
- }
- .select a {
- color: red;
- text-decoration: none;
- }
- .select a:hover {
- text-decoration: underline;
- }
- ```
- ### &가 뒤에 오는 경우
- - `&`가 뒤에 오는 경우는 위에서 본경우랑 다른경우이다.
- - 부모선택자가 `&`를 사용한 선택자의 하위 선택자로 위치하게 된다.
- ```css
- .select1 {
- padding: 30px;
- .another & {
- margin: 20px;
- }
- }
- ```
- 위의 `scss`를 `css`로 바꾸면 아래와 같다.
- ```css
- .select1 {
- padding: 30px;
- }
- .another .select1 {
- margin: 20px;
- }
- ```
- 위 처럼 `&`의 자리에 `부모 선택자`가 위치하게 된다.
- `결과적으로 .another라는 선택자의 하위 선택자로 컴파일`
- ### 결론
- #### SASS에서 `&` 부모선택자를 의미
- 1. 부모 선택자와 해당 선택자를 묶는 역할
- 2. 부모 선택자를 다른 선택자의 하위 선택자로 처리하는 역할
- ---
- ## SASS에서 주석
- - 한글 주석은 Complie Error
- - `/* comments */` 주석은 SASS에도 남고 CSS에도 남는다.
- - `// comments` 주석은 SASS에만 남고 CSS에는 남지않는다.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement