コンパスに条件文を書く

Question

私は以下の4つのクラスを持っています。

.editor-item{@extend .popover-icons; margin:10px auto;} 
 
.editor-item-photobook {@extend .editor-item; background-position:-15px -19px; } 
 
.editor-item-desc{ color:$white; width:98%; margin:0 auto;} 
 

 
.editor-item-wrapper{ 
 
    border:1px solid $editor-menu-border; @include border-radius(2px); 
 
    padding:15px; width:96px; height:96px; background-color:$editor-menu-background; 
 
    &:hover{border:1px solid $hightlighteBorderInside-blue-fill; background- 
 
    color: $hightlighteBorderInside-blue-fill; @include transition-duration(0.5s);}}

今、私が欲しいもの.editor項目ラッパーがオンに推移したときを検出COMPASS/SCSSで条件文を書くことです。そして、それが上に置かれているとき、私はエディタ項目のdescが30％だけ消えるようにしたい。どのようにこれを達成するためのアイデア？

Answer 1

私はあなたのHTMLを見たが、ここで私は物事にアプローチする方法を大別されていない。

1. は.editor-item-wrapperにホバーを設定します。
2. .editor-item-descで不透明度の遷移を準備します。

3. アクセス.editor-item-descは、ホバー内にあり、フェードアウトを制御します。

   .editor-item-desc { 
       transition: 0.5s opacity; 
   } 
   
   .editor-item-wrapper { 
       ... 
       &:hover .editor-item-desc { 
       opacity: 0.3; 
       } 
   }