SASS:Variables and Nesting

Sassの使用
Sassの主な特性変数

//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;
}
}

色変数を指定してnavラベルに適用
変数を使用する場合は$(ドル記号)をマークします.

変数の使い勝手は？

色を変更する必要がある場合は、色に適用されるタグとクラス名を検索します.
変更する必要はなく、変数で設定した色を変更するだけで済むので使いやすい
Sassの主な特性を表示

.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)를 나타낸다

Sassを使用して、より効率的なcssコードを作成します.