scss-1: variable, nesting

scss

• gulpfile.babel.js의 const routes는 styles.scss를 보고있음
• styles.scss에서 일어나느 모든일을 관찰하고 있음
• styles.scss에서 일어나느 모든 일은 css로 compile되는 거임
• index.html도 styles.scss에 영향을 받고 있음
• scss로 작업하면 콘솔창에서 사용자가 실수하는 에러를 보여줌
• 브라우저는 scss를 못봄
• scss파일과 같은 폴더에 _variable 파일을 만듦

variable

• 웹사이트에서 가장 중요한 컬러나 스타일을 저장하고 싶을 때 씀
• _이 있는 파일들은 css로 변하지 않았으면 하는 것들임
• scss에서 variabale을 생성하는 방법: $name:value
• $을 작성하고 이름을 적어주고 value를 적어주면 끝

// _variable.scss //
$bg: red;

• scss파일에 import해 줘야함

//style.scss//
@import "_variable";
body {
  background: $bg;
  a {
    color: blue;
  }
}

→ style.css에 자동으로 변경됨(compile됨)

nesting

-사용자가 타겟하는 element를 더 정확하게 해줌

    <h2>Title</h2>
    <div class="box">
      <h2>Another Title</h2>
      <button>Hello</button>
    </div>
    <button>Bye</button>

.box {
  margin-top: 20px;
}
.box h2 {
  color: blue;
}
.box button {
  color: red;
}

↓ nesting 적용 ↓

.box {
  margin-top: 20px;
  h2 {
    color: blue;
  }
  button {
    color: red;
  }
}

.box h2:hover {
	color:red;
}
.box:hover {
  background-color: green;
}

↓ nesting 적용 ↓

.box {
  margin-top: 20px;
  h2 {
    color: blue;
    &:hover {
      color: red;

  }
  button {
    color: red;
  }
  &:hover {
    background-color: green;
  }
}

• &로 부모 대체 할 수 있음