cssを３倍楽に lessに関する基本のき

lessはcss記述を簡略化してくれる便利なやつ。
lessに関する基本情報まとめ

lessをインストール

　mode.jsをインストール後、コマンドプロンプトなどでnpm install less -gと打つ
これで完了。

　lessファイルをcssに反映

lessc＋lessファイルの名前＋cssファイルの名前を打ち込む

less最大の特徴「変数」

　lessでは自分で変数を設定できる
例）@mycolor: red;

また、変数はpやh1などプロパティにも使える

例）@dir: "./img";
h1{
background:url("@{dir}/bg.png");
}
こうすれば、
h1{
background: url("./img/bg.png");
}
　と表示される

ミックスイン機能

　lessではミックスインという機能を使うことができる
変数のでっかいバージョンってかんじ？

例）

quiita.rb

my-mixin{border: 5px, solid red;

padding: 7px;

margin: 7px;}


h1{
my-mixin()
font-size: 20px;

また、paddingだけは適宜サイズを変えたい…なんて時は

quiita.rb

my-mixin[@border]{
border 5px; solid: red;
padding: padding;

margin: 7px;}


h1{

my-mixin(5px);}


と書くことが出来る。
この場合、borderは5px。
もちろん、複数設定することも可。