对不同的网格项目重用css hover stlye

<div class="grid-item">网格项目1</div>
<div class="grid-item">网格项目2</div>
<div class="grid-item">网格项目3</div>

.grid-item:hover {
  /* hover样式 */
  background-color: #ff0000;
  color: #ffffff;
}

@for $i from 1 through 3 {
  .grid-item-#{$i}:hover {
    /* hover样式 */
    background-color: #ff0000;
    color: #ffffff;
  }
}

.grid-item-1:hover {
  /* hover样式 */
  background-color: #ff0000;
  color: #ffffff;
}

.grid-item-2:hover {
  /* hover样式 */
  background-color: #ff0000;
  color: #ffffff;
}

.grid-item-3:hover {
  /* hover样式 */
  background-color: #ff0000;
  color: #ffffff;
}

.grid-item:hover {
  /* hover样式 */
  background-color: #ff0000;
  color: #ffffff;
}

.grid-item:hover {
  /* hover样式 */
  background-color: #ff0000;
  color: #ffffff;
}

.grid-item:focus {
  /* focus样式 */
  outline: none;
}