頻繁に使う値を変数化しておき、同じ値を何度も記述する手間を省いて簡略化することができます。値の変更も変数定義の一カ所だけ書き換えれば、同じ変数を使うセレクターすべてに反映します。
変数定義は、頭に「@」を付けて宣言します。続けて変数名、代入記号コロン「:」、値の順に記述し、セミコロン「;」で区切ります。（例）「@color1: #5566FF;」。
今回のテスト：
外部ファイルとして、 変数を用いたテスト用LESS「less-test2.less」を作成しました。hrmlの中で、繰り返し使う色を変数化し、その変数の値を変更することで、全体の色を変更するモデルとして、色以外の内容をまったく同じにした２つのbox（.box01と.box02）を用意しました。そして、それぞれ@color1、@color2の変数を使い、繰り返し使う色（青と赤）を指定しています。「less.jsを使ったLESSの表示テスト（１）」と同様にhtmlの<head>内にlessファイルをリンクし、bodyのラスト部分で、less.jsを読込み、コンパイルします。このテストページへのリンクはページ下側にあります。
@color1: #5566FF;
@color2: #CB032B;
div.box01 {
width: 580px;
margin: 15px auto;
padding: 5px;
border: 1px solid @color1;
background: #fff;
h2 {
width: 550px;
margin:0 auto;
background: @color1;
color: #fff;
font-size: 22px;
padding: 5px 15px;
}
h3 {
background: #fff;
color: @color1;
font-size: 16px;
margin: 5px 0;
padding: 3px 0 3px 10px;
}
p {
color: @color1;
}
}
div.box02 {
width: 580px;
margin: 15px auto;
padding: 5px;
border: 1px solid @color2;
background: #fff;
h2 {
width: 550px;
margin:0 auto;
background: @color2;
color: #fff;
font-size: 22px;
padding: 5px 15px;
}
h3 {
background: #fff;
color: @color2;
font-size: 16px;
margin: 5px 0;
padding: 3px 0 3px 10px;
}
p {
color: @color2;
}
}
ul {
margin:5px;
li {
list-style-type: decimal;
}
}
div.cap1 {
width:580px;
margin:10px auto;
tezt-align:left;
}<head> <meta charset="UTF-8"> <title>less.jsを使ったLESSの表示テスト</title> <link rel="stylesheet/less" type="text/css" href="less-test2.less"> </head> <body> ------中略------- <script src="less.js" type="text/javascript"></script> </body>
