More than 5 years have passed since last update.

Sassのhoverとactiveは&記号で楽に使える

Posted at 2020-05-20

カーソルが乗ったときにのみ色を変えたりできる状態です。
CSSの場合は、セレクタ:hoverで、
Sassの場合は、&:hoverで実行できます。
【例】

stylesheet.scss

.main {
  font-size: 20px;
  text-align: center;
  &:hover {
    opacity: 1;
  }
}

要素(ボタンなど)がクリックされている間だけCSSを適用します。
こちらもhoverと一緒でCSSの場合は、セレクタ:activeで、
Sassの場合は、&:activeで実行できます。
【例】

stylesheet.scss

.main {
  font-size: 20px;
  text-align: center;
  &:active {
    position: relative;
    top: 5px;
    box-shadow: none;
  }