More than 5 years have passed since last update.

【Sass学習メモ】active, hoverの記述を入れ子で記述する

Posted at 2018-01-07

##やりたいこと
active, hoverの記述を入れ子で記述する

##解決策

styleshet.css

.button:hover {
      opacity: 1;
    }

.button:active {
      box-shadow: none;
    }
}

styleshet.scss

.button {
    &:hover {
      opacity: 1;
    }
    &:active {
      position: relative;
      top: 7px;
      box-shadow: none;
    }
}

入れ子で書く場合は、&でつなぐことで実現できる。