selector

선택자

& 가상 선택자로써, 부모 선택자를 참조 할 수 있음.
css 자식 선택자와 동일하게 사용 가능. (ul > li)
css 자손 선택자와 동일하게 사용 가능. (li a)
last-child 를 이용하여 마지막 요소의 속도를 가져올 수 있음.

a { 
  color: red;
  // &.active == a:active
  &.active { color: blue; }
}

scss

$red: red;

.aa { 
  color: $red; 
  ul { 
    border: 1px solid $red;
    > li { 
          background: pink;
        a { 
          text-decoration: none;
          &:hover { color: $red; }
          &.bbb { font-size: 11px }
        }
          .bbb { color: greenyellow; }
          &:last-child { border: 1px dotted yellow; }
    }
  }
}

css

.aa { color: red; }

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

.aa ul > li { background: pink; }

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

.aa ul > li a:hover { color: red; }

.aa ul > li a.bbb { font-size: 11px; }

.aa ul > li .bbb { color: greenyellow; }

.aa ul > li:last-child { border: 1px dotted yellow; }