sass_tip.md

SASS에서 Filename을 _으로 하는 이유

• 하나의 SASS 파일 내부에 포함된 별도 파일의 경우에도 컴파일이 될수 있다.
• 이런일을 방지하기위해서는 애초에 별도의 파일인 경우 파일이름앞에 _filname.scss라고 _를 적용해줘야 한다.

@import "color";
@import "font";

위와 같이 있을때 color, font는 외부파일을 불러오는 경우인데

_로 파일이름이 되어있지 않으면 컴파일이 되어버린다.

_로 파일이름이 되었으면 코드에는 포함되지만 자체적으로 컴파일되진 않습니다.

그래서 위의 파일이름을 _color.scss, _font.scss라고 지정해줘야 한다.

---

SASS & 의 의미

&가 앞에 있을때

• &를 이용하여 a 선택자와 연동되어 처리하는 것
• 선택자끼리 묶어주는 역할

.select {
  padding: 20px;
  a {
    color: red;
    text-decoration: none;
    
    &.hover {
      text-decoration: underline;
    }
  }
}

위의 scss를 css로 바꾸면 아래와 같다.

.select {
  padding: 20px;
}

.select a {
    color: red;
    text-decoration: none;
}

.select a:hover {
    text-decoration: underline;
}

&가 뒤에 오는 경우

• &가 뒤에 오는 경우는 위에서 본경우랑 다른경우이다.
• 부모선택자가 &를 사용한 선택자의 하위 선택자로 위치하게 된다.

.select1 {
  padding: 30px;
  .another & {
    margin: 20px;
  }
}

위의 scss를 css로 바꾸면 아래와 같다.

.select1 {
  padding: 30px;
}

.another .select1 {
  margin: 20px;
}

위 처럼 &의 자리에 부모 선택자가 위치하게 된다. 결과적으로 .another라는 선택자의 하위 선택자로 컴파일

결론

SASS에서 & 부모선택자를 의미

1. 부모 선택자와 해당 선택자를 묶는 역할
2. 부모 선택자를 다른 선택자의 하위 선택자로 처리하는 역할

---

SASS에서 주석

• 한글 주석은 Complie Error
• /* comments */ 주석은 SASS에도 남고 CSS에도 남는다.
• // comments 주석은 SASS에만 남고 CSS에는 남지않는다.