VSCode の設定を省略して Less をすぐに使用する方法

この記事では、VSCode で設定なしで Less を使用する方法を紹介します。

Less

フロントエンド ページの制作プロセス中に、ページ内に多くの要素があり、階層構造が存在する場合、構造が複雑なため、私たちが作成した CSS は特に冗長であり、保守が容易ではありません。 [推奨学習: "vscode チュートリアル "]

つまり、CSS には、Less、Sass# などの拡張機能が多数あります。 ##etcCSS プリプロセッサ。

一般的に、これらの

CSS 拡張言語を使用する場合は、まず npm を使用してダウンロードし、次に webpack で構成します。

ブラウザに直接インポートすることはできませんが、最初に

clean-css プラグイン を導入する必要があります。

しかし、

less を使用してスタイルを設定する最速の方法が必要な場合、私が見つけた方法は、vs code でプラグインを使用し、vs code# に実行させることです。 ## は CSS のコンパイルに直接役立ちます。この方法は私も今よく使っている方法です。

Easy Lessここでは、

Easy Less

というプラグインをお勧めします。

Easy Less

vs code の拡張機能ストアに直接インストールされた後に有効になります。これで、less ファイルを作成して、less を使用できるようになります。その中に以下のようにスタイルコードを記述し、保存すると同階層のlessフォルダに同名のcssファイルが生成されることがわかります。

Less ファイルの内容:

@setColor:{
    1: #ff0000;
    2: #ff0;
    3: #f0f;
    4: #0ff;
    5: #00f;
}
#app {
    .ul {
        each(@setColor, {
            .li@{key} {
                background-color: @value;
                width: 100px;
                height: 20px;
            }
        })
    }
}

生成された CSS コード:

#app .ul .li1 {
  background-color: #ff0000;
  width: 100px;
  height: 20px;
}
#app .ul .li2 {
  background-color: #ff0;
  width: 100px;
  height: 20px;
}
#app .ul .li3 {
  background-color: #f0f;
  width: 100px;
  height: 20px;
}
#app .ul .li4 {
  background-color: #0ff;
  width: 100px;
  height: 20px;
}
#app .ul .li5 {
  background-color: #00f;
  width: 100px;
  height: 20px;
}

このようにして、ページを紹介するときに、次のことができます。追加の変換作業を行わずに、この CSS ファイルを直接導入します。実際、

vs code

には、less の簡易ツールだけでなく、sass ツール プラグインも含まれています。興味のある方は、ぜひ試してみてください。 。 プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

以上がVSCode の設定を省略して Less をすぐに使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。