Scss #4. 선택자 (Seleter)

기본적인 사용법은 네스팅에서 확인했지만 Scss의 경우 & 표시를 이용해서 부모?의 값을 치환해서 가져올수있다.

 

먼저 html을 보자

<div class="sample">
 <ul>
  <li><a href="#a">테스트1</a></li>
  <li><a href="#a" class="sample2">테스트2</a></li>
  <li><a href="#a">테스트3</a></li>
 </ul>
</div>

 

다음은 scss 파일이다 a:hover와 li:last-child를 표현하는 부분을 보면알겠지만 &표시를 통해 상위의 감싸져있는값을 가져올수 있다.

// scss file

.sample {
  color: red;
  ul {
    border: 1px solid red;
    > li {
      background: pink;
      a {
        text-decoration: none;
        &:hover {
          color: green;
        }
        &.sample2 {
          font-size: 10px;
        }
      }
      &:last-child {
        border: 1px solid yellow;
      }
    }
  }
}

 

위의 scss를 컴파일한 css파일 보면 &으로 표현 했던부분이 상위값을 가져와서 표현되고있다.

 

scss는 여러가지부분에서 편리한 부분이있지만 확실히 익숙해져야지 작업능률이 올라갈거같다..

// css file

.sample {
  color: red;
}

.sample ul {
  border: 1px solid red;
}

.sample ul > li {
  background: pink;
}

.sample ul > li a {
  text-decoration: none;
}

.sample ul > li a:hover {
  color: green;
}

.sample ul > li a.sample2 {
  font-size: 10px;
}

.sample ul > li:last-child {
  border: 1px solid yellow;
}