5

私の Web プロジェクトでは、メンテナンス上の理由から、CSS を個別の LESS ファイルに分割しました。@import ディレクティブを使用して、他の less ファイルをインポートするマスター ファイルとして機能する config.less というファイルがあります。

このセットアップの問題は、LESS ファイルの編集中に、たとえば base.less で @textColor というプロパティ変数を追加しているときに、別の less で宣言されている「宣言されていない変数」と「宣言されていない mixin」が大量に発生することです。 variables.less というファイル。外部の less ファイルで定義されている変数とミックスインを Web Essentials に認識させる方法はありますか?

Web Essentials をつまずかせているように見えるもう 1 つのことは、LESS のネストされたメディア クエリ機能を使用している場合です。

.some-selector {
    background: #000;
    @media only screen and (max-width: 800px) {
        background: #fff;
    }
}

ネストされた @media 宣言には赤い下線が付き、カーソルを合わせると「スタイル ルールで予期しない '@' ブロック」と表示されます。ネストされた背景プロパティにカーソルを合わせると、「検証: 'color' は有効な HTML タグではありません。

4

1 に答える 1

2

Web Essentialsの問題についてはお答えできませんが@media、変数と mixin の問題についてはアドバイスできます。

基本的に、config.lessファイルをvariables.lessおよび他の mixin ファイルが になるように変更し、そこからの変数を使用する各ファイルに@import-onceも追加します (使用される mixin ファイルについても同じことを行います)。@import-once 'variables.less

これが行うことは、作業している場合はファイルをインポートすることですbase.less（config.lessあなたvariables.lessのvariables.less.

于 2013-02-19T17:17:31.710 に答える