将任何类扩展和扩展到任何其他类在SASS或SCSS中的悬停

时间:2015-12-18 07:32:22

标签: html css sass hover

有没有办法将任何类的hover扩展到任何其他类的悬停?

我的代码是这样的,它停止了两个类的悬停:S

HTML

<a href="#" class="button1">Button 1</a>
<a href="#" class="button2">Button 2</a>

SCSS

.button1 {
  background: black;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    background: red;
  }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend .button1:hover
  }
}

4 个答案:

答案 0 :(得分:8)

您可以使用占位符。

%hover {
  background: red;
}

.button1 {
  background: black;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend %hover;
  }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend %hover;
  }
}

或者,也许是更好的解决方案,为按钮使用更通用的类:

.btn {
  padding: 5px 10px;
  text-decoration: none;
  color: white;

  &:hover {
    background: red;
  }
}

.btn--1 {
  background: black;
}

.btn--2 {
  background: blue;
}

答案 1 :(得分:0)

试试这个解决方案。它对我有用 http://jsbin.com/lezuwalida/edit?html,css,output

生成的css看起来相同

.demon:hover, .demon.demo {
  outline: 3px solid red;
}

.demon2:hover, .demon2.demo2 {
  outline: 3px solid red;
}

答案 2 :(得分:0)

您可以使用mixin

@mixin hoverStyle {
   &:hover{
     background: red;
   }
}

.button1 {
   background: blue;
   padding: 5px 10px;
   text-decoration: none;
   color: white;
   @include hoverStyle;
}

.button2 {
   background: blue;
   padding: 5px 10px;
   text-decoration: none;
   color: white;
   @include hoverStyle;
}

答案 3 :(得分:-2)

处理所有这些事情的一个好方法是使用变量, 例如,如果你定义这样的东西:

$buttons-hover-color: #somecolor;

然后你可以在任何按钮中调用它,如果你将来想改变它,只需更改变量,所有按钮都会更新。 另一个重要的事情是,扩展在媒体查询中不起作用,因此将来当您定位移动时,您可能不希望在移动设备中使用红色,因此您只需要为其创建另一个var。

类似的东西:

$btn-hover-color: red;
$btn-hover-mobile: black;

.button1 {
 background: black;
 padding: 5px 10px;
 text-decoration: none;
 color: white;
 &:hover {
  background-color: $btn-hover-color;
 }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    background-color: $btn-hover-color;
  }

  @media (max-width: 800px) {
    &:hover {
      background-color: $btn-hover-mobile;
    }
  }
 }

希望这能帮到你