0

デフォルト状態とホバー状態の Less mixin があります。ここで、親要素にカーソルを合わせているときに、ミックスインでホバー状態を有効にする必要があります。

以下

#icons () {
  .settingsIcon() {
    background: url("settings.png");
    &:hover {
      background: url("settings_hover.png");
    }
  }
}

.SettingsButton {
    height: 50px; 
    width: 200px;
   .icon {
       #icons > .settingsIcon();
    }
}

HTML:

<div class="SettingsButton" >
  <span>Settings</span>
  <div class="icon"></div>
</div>

settingsIcon ホバーで発生するのと同じ効果が、ボタン ホバーでもトリガーされるようにする必要があります。hoverだから私はこのようなことをする必要があると思いますsettingsIcon。このようなもの（有効なLessコードではありません）

.SettingsButton:hover {
  .icon {
     #icons > .settingsIcon():hover;
  }
}

どうすればいいですか？

4

2 に答える 2

1

以下の例のようにミックスインを書き直したほうがよいでしょう。基本的に、基本設定とhover設定を同じ名前空間 ( #icons()) 内の 2 つの異なる mixin に分割し、必要に応じてそれらを呼び出します。

#icons () {
  .settingsIcon() {
    background: url("settings.png");
  }
  .settingsIconHover(){     
    background: url("settings_hover.png");
  }
}

.SettingsButton {
  height: 50px; 
  width: 200px;
  .icon {
    #icons > .settingsIcon();
    &:hover{
      #icons > .settingsIconHover();
    }
  }
  &:hover .icon{
    #icons > .settingsIconHover();
  }
}

#iconsすべての状態に対して1 つのエントリのみを維持しながらこれを実現する別の方法.iconは、以下のスニペットのように、セレクターも mixin 内に移動することです。

#icons () {
  .settingsIcon() {
    .icon{
      background: url("settings.png");
    }
    &:hover .icon, & .icon:hover{ /* & here means .SettingsButton */
      background: url("settings_hover.png");
    }
  }
}

.SettingsButton {
  height: 50px; 
  width: 200px;
  #icons > .settingsIcon();
}
于 2015-05-07T15:33:55.220 に答える
0

も使用することでこの問題を解決できると理解していますextend。

.settingsIcon {
    background: url("settings.png");
    &:hover {
      background: url("settings_hover.png");
    }
}


.SettingsButton {
    height: 50px;
    width: 200px;
    &:extend(.settingsIcon all);
    .icon {
       &:extend(.settingsIcon all);
    }
}

出力:

.settingsIcon,
.SettingsButton,
.SettingsButton .icon {
  background: url("settings.png");
}
.settingsIcon:hover,
.SettingsButton:hover,
.SettingsButton .icon:hover {
  background: url("settings_hover.png");
}
.SettingsButton {
  height: 50px;
  width: 200px;
}

.settingsIcon上記により、CSS で使用されていないセレクターが生成されることに注意してください。原因 Less では、出力しないミックスイン ( https://github.com/less/less.js/issues/1177.settingsIconを参照) を拡張する@importことはできません。次のreferenceキーワードを使用してファイルを作成します。

settingsicon.less:

.settingsIcon {
    background: url("settings.png");
    &:hover {
      background: url("settings_hover.png");
    }
}

project.less:

@import (reference) "settingsicon.less";
.SettingsButton {
    height: 50px;
    width: 200px;
    &:extend(.settingsIcon all);
    .icon {
       &:extend(.settingsIcon all);
    }
}

コンパイルすると、project.less次が生成されます。

.SettingsButton,
.SettingsButton .icon {
  background: url("settings.png");
}
.SettingsButton:hover,
.SettingsButton .icon:hover {
  background: url("settings_hover.png");
}
.SettingsButton {
  height: 50px;
  width: 200px;
}

--

最初にすべての子要素を含むホバー用の CSS を探していませんか?

更新 @harry 書きました:

私の理解では、同じ背景を .SettingsButton:hover .icon と .SettingsButton .icon:hover のみに適用する必要があるということでした。

それは理にかなっていると思います。拡張を使用してそれを行うこともできますが、同じクラスを2回拡張することもそれほどDRYではないことに同意します。

もう一度settingsicon.less ：

.settingsIcon {
    background: url("settings.png");
    &:hover {
      background: url("settings_hover.png");
    }
}

以下を使用できます。

@import (reference) "settingsicon.less";
.SettingsButton {
  height: 50px;
  width: 200px;
  &.icon {
  &:extend(.settingsIcon);
  }
  &:hover, & .icon:hover {
  &:extend(.settingsIcon:hover);
  }
}

また：

@import (reference) "settingsicon.less";
.SettingsButton {
  height: 50px;
  width: 200px;
  & .icon {
  &:extend(.settingsIcon all);
  }
  &:hover {
  &:extend(.settingsIcon:hover);
  }
}

どちらも次のようにコンパイルされます。

.SettingsButton.icon {
  background: url("settings.png");
}
.SettingsButton:hover,
.SettingsButton .icon:hover {
  background: url("settings_hover.png");
}
.SettingsButton {
  height: 50px;
  width: 200px;
}
于 2015-05-09T14:50:41.070 に答える