ネストされたスタイルでアブソリュートセレクタを追加する

Question

重複を避けるためにLessでいくつかのネストされたスタイルを再利用する最良の方法を理解しようとしていますが、私は最良の方法を見つけたかどうかはわかりません。今、私は.action-linkにアウタースタイルを適用せず、セレクタ.action-link aに、同じ内部リンクのスタイルを適用したい

.category-link, 
.caption-link { 
    background-color: @linkColour; 
    font-family: @linkFont; 
    max-width:2em; 
    a { 
     /* INNER LINK STYLES */ 
     text-decoration:none; 
     white-space:nowrap; 
     /* ...INNER LINK STYLES CONTINUE... */ 
    } 
} 

：

は今、私のようなものを持っています。

私はこのようにそれを行う場合、私は私の意図した出力を得る：任意の重複を必要としませんが、私は彼らが関連している彼らの現在の場所でこれらのスタイルを維持することを好むだろう

.inner-link-styles() { 
    /* INNER LINK STYLES */ 
    text-decoration:none; 
    white-space:nowrap; 
    /* ...INNER LINK STYLES CONTINUE... */ 
} 
.category-link, 
.caption-link { 
    background-color: @linkColour; 
    font-family: @linkFont; 
    max-width:2em; 
    a { 
     .inner-link-styles; 
    } 
} 
.action-link a { 
    .inner-link-styles; 
} 

、それらをmixins.lessに移動し、次の開発者がトラブルシューティングを行うために複雑さを増やすよりも、

何を直感的に感じたが、明らかに間違っている、このようなものだった：

.category-link, 
.caption-link { 
    background-color: @linkColour; 
    font-family: @linkFont; 
    max-width:2em; 
    & a, 
    .action-link a { 
     /* INNER LINK STYLES */ 
     text-decoration:none; 
     white-space:nowrap; 
     /* ...INNER LINK STYLES CONTINUE... */ 
    } 
} 

が、他のいくつかの私は、それは絶対に基づいて、持っているセレクタに適用することができ接頭辞ではなく、それはネストレベルだと相対があります？

Answer 1

アブソリュートセレクタはネストされたブロック内に追加することはできません。別のブロックの下にネストした後は、&.をセレクタに追加しない限り（インテルセレクタはDOMのように）その場合、内側のものは親自体の別のクラスになる可能性があります）。あなたが複数の要素に共通のプロパティのセットを割り当てているので、ミックスインまたは:extend機能を使用して

は、あなたのケースのための最高のオプションです。

---

親セレクタは、（それが.category-link a又は.caption-link aのいずれかである）が知られているので、あなたも.action-link aにそのセレクタのプロパティを拡張することができます。これは、内側のリンクのプロパティだけを拡張し、その親のプロパティは拡張しません。

元の.category-link aのプロパティを変更すると、.action-link aのプロパティも変更されるため、次の開発者がトラブルシューティングを行うための複雑さが増すとは思われません。

.category-link, 
.caption-link { 
    background-color: blue; 
    font-family: Arial; 
    max-width:2em; 
    a { 
     /* INNER LINK STYLES */ 
     text-decoration:none; 
     white-space:nowrap; 
     /* ...INNER LINK STYLES CONTINUE... */ 
    } 
} 
.action-link { 
    a { 
    &:extend(.category-link a); 
    } 
}