css - クエリをサポートする CSS プリプロセッサ

Question

次の機能が必要です。

/* define rule */
div.primary { padding: 12px 0 0 0; }

/* use it */
div.secondary { @(div.primary, padding-top) }
/* or */
div.secondary { padding-top: @(div.primary).padding-top }

lesscss はそのようなクエリをサポートしていないようです。多分それを拡張することが最善の方法でしょうか？じゃあどうやって伸ばすの？

更新: less の作成者がこの機能を削除することを決定したことがわかりました: https://github.com/cloudhead/less.js/issues/6

Answer 1

あなたはもっと間接的にならなければなりません。変数を定義して、次のように使用します。

@topPad: 12px;

/* use it to define rule */ 
div.primary { padding: @topPad 0 0 0; } 

/* use it again */ 
div.secondary { padding-top: @topPad;}

Answer 2

これをテストする機会はありませんでしたが、LessCSS の組み込みの JavaScript 解析を使用して、必要なものを取得できる可能性があります。

div.secondary{
   padding-top: `((document.createElement('div')).className='primary').style.paddingTop`;
}