セレクタのコンテンツを別のセレクタのコンテンツにインポートすることは可能ですか？

Question

私の目標は、コンテンツプロパティが将来変更される場合に、アイコンクラスから別のセレクタにcontent: '\e826';をインポートすることです。

.icon-hi:before {content: '\e826';} 

.panel { 
    background: white; 
    .panel-title { 
     &:before { 
      @include .icon-hi; 
      text-align: center; 
      width: 20px; 
      height: 20px; 
     } 
    } 
} 

もちろん、@importは機能しませんが、別の方法がありますか？一つの場所に値を定義する目的のために

Answer 1

、あなたは変数を使用する必要があります。

@icon-hi: '\e826'; 

.icon-hi:before {content: @icon-hi;} 

.panel { 
    background: white; 
    .panel-title { 
     &:before { 
      content: @icon-hi; 
      text-align: center; 
      width: 20px; 
      height: 20px; 
     } 
    } 
} 

あなたは実際には「別に1つのセレクタをインポートする」ことができます。これは基本的にmixinが何をするのかです。これらは、以下のドキュメントの最初の2つの機能です - 第三の選択肢が広がる機能を使用することですhttp://lesscss.org/features/

：http://lesscss.org/features/#extend-feature

Answer 2

することができます、ここでの例です：

.icon-hi{ 
    &:before{ 
    content: '\e826'; 
    } 
} 

.panel { 
    background: white; 
    .panel-title { 
    .icon-hi; 
      &:before { 
       text-align: center; 
       width: 20px; 
       height: 20px; 
      } 
     } 
    } 

あなたが定義する必要があります。 icon-hiクラスを定義し、beforeをネストして定義しておくと、プリプロセッサは何をフェッチするかを知ることができます。