hoverのscssへの書き換え

hover

hoverはcssを使用する際に、指定したタグにマウスポイントが乗ったら処理を行うという設定です。hoverを使用することにより、文字色や背景色を変えたり、位置をずらしたりすることができます。

scss

scssとは、cssを拡張したメタ言語であるsassの別文法として定義されたcss風に書ける文法です。変数やセレクタのネスト・継承などを行うことができ、css風で書けることから広く使われています。

hoverのcss→scssへの書き換え

hoverをcssからscssへ書き換えてみたいと思います。

hover：css

a {  
    font-size: medium;  
}  
a:hover {  
    color: red;  
}  

↓scssに書き換えます。  

a {  
    font-size: medium;  
    &:hover {  
        color: red;  
    }  
}  

セレクタに「&」を使うことでネストしている際の親セレクタの参照が可能です。