less - ファイル名を取得し、LESS でクラス セレクターとして使用する

Question

ファイルの名前を取得してクラス セレクタとして使用することはできますか? 「colorScheme.less」というファイルがあり、このファイルの中に「.colorScheme」というプレフィックスが付いたすべてのスタイル ルールがあります。colorScheme.less のファイル名を変更すると、このセレクターを置き換えるにはどうすればよいですか?

Answer 1

回避策

LESS で JavaScript 機能を使用してファイル名を取得し、必要なことを行う方法があるかもしれません。ただし、それは私がここで提供する解決策ではありません。代わりに、これは 2 つのファイル ソリューションを使用します。

LESS の最近のバージョン (1.3.3) を想定すると、colorScheme.lessファイルと別のファイルがあり、それをファイルと呼びましょうloader.less。には次の 2 行しかありませんloader.less。

loader.less

@fileName: colorScheme;   
@import: "pathToFile/@{fileName}.less";

これで、ファイルに設定している変数colorScheme.lessを利用するように設定しました。したがって、次のようなものがあります。@fileNameloader.less

colorScheme.less

.@{fileName} p {color: red;}
.myClass-@{fileName} {color: blue;}
.@{fileName}-extended {color: yellow;}

コンパイル中...

.colorScheme p {color: red;}
.myClass-colorScheme {color: blue;}
.colorScheme-extended {color: yellow;}

あなたが持っているすべての場所で、.colorSchemeそれを に変更し.@{fileName}ます。次に、新しいloaderファイルを作成して、クラス名を変更できます (これは、部分的にやりたいことだと思います)。