less css基礎チュートリアル

lessはより簡潔なcssとされている.それは私たちに多くのプログラミング言語にしかない特色を提供してくれました.変数、関数、継承など(他のプログラミング言語で見られる伝統的な継承機能とは異なります)
lessでは、より清潔で効率的なcssを作成することができ、lessでcssを維持するのも簡単です.
Lessを使用するには、まずlessコンパイラが必要です.私が使っているLessコンパイラはproperです.properを使うのは直接的なことです.properでlessファイルを開くだけで、これらのlessファイルが自動的にコンパイルされます.保存ボタンをクリックして保存場所を指定するたびに、対応するcssファイルが生成されます.
今、あなたの大好きなテキストエディタで新しいファイルを作成して、好きな名前を勝手に付けて、私はtut.という名前を作成します.lessのファイル.ここではlessの基礎機能をいくつか示します.
variable(変数):
変数は、同じ値を複数の場所に適用し、後でこの値を変更する可能性が高い場合に特に役立ちます.
lessでは変数@variableName:valueを作成できます.この変数は、枠線のスタイル、またはコンテンツのスタイル、またはピクセル値を格納します.変数を使用する例を次に示します.生成された対応するcssコンテンツはファイルtutに格納.css里.
tut.lessファイル:

@textColor: white;
@bgColor: #333;
@border: 2px solid red;
@content: "This is the sample content from less";

// variable example

#content p {
    color: @textColor;
    background-color: @bgColor;
    border: @border;
}

tut.cssファイル:

#content p {
  color: #ffffff;
  background-color: #333333;
  border: 2px solid #ff0000;
}
#content p:after {
  content: "This is the sample content from less";
}

上の例では変数がlessファイルに定義されています.これらの変数はcontent pスタイルに適用されます.ご覧のように、生成されたファイルでは、変数が宣言された値に置き換えられます.
mixins(ブレンド):
Mixinsはコードを多重化する方法です.「Mixin in」mixinと呼ばれ、あるcssスタイルを別のcssスタイルにブレンドすることができます.mixinを作成するのは簡単です.ブレンドするスタイルを現在のスタイルに含めるだけです.次のようになります.
tut.less:

// mixin example

.myStyle {
  color: #333;
  border: 1px solid gray;
}

#myDiv {
  .myStyle
}

tut.css

.myStyle {
  color: #333;
  border: 1px solid gray;
}

#myDiv {
  color: #333;
  border: 1px solid gray;
}

上の例ではmystyleのスタイルは#myDivに適用されます.
NESTING(ネスト):
1つのセレクタに別のセレクタをネストして継承を実現することができ,これによりコード量が大幅に減少し,コードがより明確に見えるようになった.
tut.less:

// nested style example

#myDiv {
  background-color: black;
  a {
    color: red;
  }
  
  p {
    color: white;
  }
}

tut.css 

#myDiv {
  background-color: black;
}

#myDiv a {
  color: red;
}

#myDiv p {
  color: white;
}

前の例では、#myDivに表示されるすべてのaラベルは赤いフォントを使用し、#myDivに表示されるすべてのpラベルは白いフォントを使用します.