3

これは私のstyle.lessコードです：

.transition {
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.shadow {
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 10px #808080;
    -o-box-shadow: 0px 0px 10px #808080;
    -webkit-box-shadow: 0px 0px 10px #808080;
    box-shadow: 0px 0px 10px #808080;
}

    .shadow:hover {
        -moz-box-shadow: 0px 0px 10px #a5a5a5;
        -o-box-shadow: 0px 0px 10px #a5a5a5;
        -webkit-box-shadow: 0px 0px 10px #a5a5a5;
        box-shadow: 0px 0px 10px #a5a5a5;
    }


.radius {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#t1 {
    .shadow;
    .transition;
    .radius;
}

しかし、ホバー#t1しても影は変わりません。なぜそれが機能しないのか知りたいのです#t1:hoverが、スタイルを追加して継承することを期待しています他の方法はありますか？

4

2 に答える 2

6

クラスを変更して、クラス定義の一部として状態.hoverを含める必要があります。:hover

.hover {
    ...styles...

    &:hover {
        ...hover state styles...
    }
}
.someOtherClass {
    .hover;
}

例

于 2012-08-28T14:31:47.600 に答える
2

スタイルを正しく生成するには、オペレーターを介して接続し、スタイルが一緒に属するように:hoverする必要があります。.shadow.shadow:hover&

.shadow {
    /*normal styles*/
    &:hover{
       /* hover styles */
    }
}

残りは同じままでいられます。

#t1{
  .shadow;
}

これで、通常ルールとホバールールの両方が自動的に生成されます。

あなたはここでそれを試すことができます：オンライン-少ない-コンバーター

.shadow演算子を介して追加するすべての追加ブロックも&自動的に適用される#t1ため、別のブロックを追加すると、次のようになります。

.shadow{
    &:hover{}   
    &.foo{
       /* another set of rules*/
    }
}
#t1{
    .shadow; /* this will now generate 3 ruleblocks for #t1*/
}

ルールブロックは、次の.foo場合にも生成さ#t1れます。

#t1{...}
#t1:hover{...}
#t1.foo{/* another set of rules*/}
于 2012-08-28T14:42:25.067 に答える