SASS:Variables and Nesting

//variables
$color-primary: #f9ed69; //yello color
$color-secondary:#f08a5d; //orange
$color-tertiary: #b83b5e;
$color-text-dark:#333;
$color-background: #fff;
$width-button:150px;
//색상 변수 지정하기


nav {
  margin:30px;
  background-color: $color-secondary;
  
  &::after {
  content:"";
  clear:both;
  display:table;
}
}

変数の使い勝手は？

.navigation {
  list-style:none;
 float:left;
  
  li {
    display:inline-block;
    margin-left:30px;
    
      &:first-child {
        margin:0;
  }
    a {
      text-decoration:none;
      text-transform:uppercase;
       color:$color-text-dark;
    }
    
  }
  
}

li {
    display:inline-block;
    margin-left:30px;
    
      &:first-child {
        margin:0;
  }
  
  //여기서 & 표시는 path(list tag)를 나타낸다