combinators.scss

// child combinator (>)
ol > li {
  color: red;
}


//  general sibling combinator (~) 
.featured-image ~ p {
  font-size: 90%;
}


// adjacent sibling combinator
p + p {
  margin: 0;
}

// @at-root
.grand-parent {
  .parent {
    @at-root .child {}
  }
}

//using & for naming classes
.btn {
  &-primary {}
  &-secondary {}
}
-->
.btn-primary {}
.btn-secondary {}