scss hoverとactiveの利用

:hoverと:activeの復習
hover　カーソルが乗ったときの状態
active　要素がクリックされている間だけCSSを適用
 

<div class="main">
  <h1>cssとscss</h1>
  <span class="button">ボタン</span>
</div>

css

.main { 略 }
  h1 {略}
.main .button { 略}

 .button:hover

{background-color: red;}

.button:active

 {position: relative;
      top: 7px;
      box-shadow: none;}

scss 

ネスト（入れ子構造）使える

.main { 略 
　　　  h3 {   略　  }
　　　  .button {　略　
      &:hover

     {background-color: red;}
     &:active{position: relative;
      top: 7px;
      box-shadow: none;}
  }