プログラミング初心者のLESS備忘録

#LESSとは？
LESSはCSSを簡単かつ効率的に書くことができる言語である。

#特徴
１．変数が使える
＠～で変数を宣言できる
例：＠mycolor

２．変数を使って四則計算ができる

３．変数は「p」や「h」などのプロパティにも使える

４．階層的な書き方ができる
LESSでは階層構造を使用できるためプロパティの宣言をいちいち行わなくていい
例:
[CSS]
header{}
header a{}
のような書き方だったがLESSでは
[LESS]
header{
a{
}
}
↑のように階層構造にすることができ、格段に見やすくなる

###☆ミックスイン
ミックスインとは要は関数のようなもので何度も使うであろう処理などを一つにまとめておくことで、ミックスイン名を宣言することで簡単に呼び出すことができる
例：
my-mixin(@width){
　　border @width solid red;
　　padding 7px;
　　margin 7px;
}
これを呼び出すには
h1{
my-mixin(7px);
font-size:20px;
のようになる
ミックスイン名の後ろの()は引数のような使い方ができる

#LESSファイル作成法
☐.lessでlessファイルを作成できる

パワーシェルなどでコマンド
lessc style.less(lessファイル名） styles.css(CSS名)でlessをCSSに変換してくれる

---

・豆知識
./と../は意味が違う
前者は下の階層、後者は上の階層へアクセスする