CSS ファイルを LESS ファイルにインポートする

LESS では、外部スタイルシートのインポートは、コードの整理と保守に便利な機能です。ただし、さまざまな種類のファイルをインポートする場合は、特定の要件を理解することが重要です。

.css ファイルのインポート

他の LESS ファイルのインポートとは異なり、.css ファイルを LESS ファイルにインポートする場合は、特別な考慮事項が必要です。 。いつものように @import ディレクティブを使用するだけでは機能しません。

.css ファイルをインポートするための構文

.css ファイルを LESS ファイルにインポートするには、次の構文を使用する必要があります:

@import (css) "path/to/style.css";

(css) オプションを指定すると、インポートされたファイルを CSS ファイルとして扱うように LESS コンパイラーに明示的に指示します。これにより、.css ファイル内の CSS スタイルが LESS ファイルに確実に含まれるようになります。

例

次のコードを検討してください:

@import (css) "../style.css";

.small {
  font-size: 60%;
  .type;
}

この例では、LESS ファイルは .type というクラスを含む ../style.css ファイルをインポートします。 (css) オプションを指定すると、LESS コンパイラーはインポートされたファイルを CSS ファイルとして認識し、LESS ファイル内でクラス .type にアクセスできるようにします。

この特定の構文に従うことで、正常にインポートして利用できます。 CSS ファイルを LESS コードに含めることで、両方のフレームワークの機能を組み合わせることができます。