外部ファイルW3.cssにクラスとのLESS mixinを作成

Question

私は主にHTMLとCSSで小さな個人プロジェクトを作成していますが、私はこれで新しく、いくつか問題があります。私はW3.CSSフレームワークを使用したいが、後で何か他のものを使用したくて、すべてのファイルをリファクタリングしたくないかもしれないので、htmlファイル（例えば<div class="w3-container">...）で明示的に使用したくない。私はless mixinsについて知っていたグーグル私は自分自身のstyle.lessファイルを使用し、そこからw3.cssをインポートし、例えばCSSだけではできないと考えられるヘッダタグ用の.w3-containerクラスを継承しています。とにかく、私は何をしようとしていますされています。どちらのファイルも、「style.less」と「w3.css」は、同じフォルダにある

@import "w3.css"; 
header { 
    .w3-container; 
} 

と私はそれを試してみて、コンパイルする次のコマンドを使用します。

私はおそらくそれをすることになっていますかあまり使用していない

NameError: .w3-container is undefined in <path to style.css> on line 3, column 2 

：エラーを出力

lessc style.less style.css 

。私は他の質問、例えばthis oneを見ましたが、できませんでした。私はnode.jsとnpmが本当に時代遅れであることにも気づいた：node: v0.12.4, latest: v5.11.0npm: 2.10.1, latest: 3.8.7しかしそれはそうではありませんでした。

なぜ機能しないのですか？

"w3-container"などのクラスを明示的に使用しないでください。

ありがとうございました。

NameError：.w3-コンテナが3行目で定義されていない、コラム2

あなたは.w3を使用しましたエラーに関して

Answer 1

質問パート1

mixinとしては含まれていますが、mixinは定義されていません。あなたはmixinを以下のように定義する必要があります：

@import "w3.css"; 

.w3-container() { 
    /*Styles to apply to the mixin would go here*/ 
} 

header { 
    .w3-container; 
} 

しかし、mixinを実際に使用しているようには聞こえません。

質問パート2あなたのコメントに関して

：

私は明示的な "W3-コンテナ" CSSへのダウン

LESSコンパイルなどのクラスを使用して回避することができ、他にどのような方法したがって、反復を減らし、コードをより保守しやすくするために、いくつかの拡張機能を提供する以外に、セレクタ（W3.cssのエイリアスなど）に関してLESSが提供できる魔法はありません。新しいCSSクラスを追加したくない場合は、より高い特異性を使用して有効なCSSセレクタを使用することに限定されます。以下の例はパスに基づいています。 w3の場合。CSSは含まれています

その後

header { 
    color: blue; 
} 

あなたは（LESSで）、より具体的なセレクタを使用することができますセクションのヘッダーをターゲットにする：

section { 
    header { 
     color: orange; 
    } 
} 

これは、CSSにコンパイルされます：

section header { 
    color: orange; 
} 

質問部分3

タールをしようとしているとき

header { 
    &.w3-container { 
    color: orange; 
    } 
} 

これは、以下のCSSにコンパイルされます：&とクラスの前に付けるので、同じようなスタイルにプロパティを定義するためのブラケットを含めることが重要である、特定のクラスの要素のインスタンスを取得

header.w3-container { color: orange; } 

.w3-containerを使用する場合、そのものでは、LESSはここでミックスインを使用すると仮定し、質問部分1からエラーを投げます。.w3-containerという名前のmixinは定義されていません。

Answer 2

@import (less) "w3.css"; 

header { 
    .w3-container; 
}