LESSの使い始めメモ

Yuuです。

CSSのLESSデビューしようと思ったので、自分なりのメモです。

入れ子構造

長くなりやすい、CSSの要素指定を簡略化することができます。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
#header li{
     float:left;
     text-align:center;
}
#header li a{
     display:block;
     background-color:#ccc;
}
#header li a:hover{
     color:#fff;
     background-color:#000;
}

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header{
     li{
          float:left;
          text-align:center;
          a{
               display:block;
               background-color:#ccc;
               &:hover{
                    color:#fff;
                    background-color:#000;
               }
          }
     }
}

変数を使う

プログラム的には当たり前の、変数をCSSでも使えるようになります。

CSS

1
2
3
4
5
6
h1{
     margin:10px;
}
h2{
     margin:10px;
}

LESS

1
2
3
4
5
6
7
@mgn: 10px;
h1{
     margin:@mgn;
}
h2{
     margin:@mgn;
}

引数・関数

CSS

1
2
3
4
5
6
7
8
9
10
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

LESS

1
2
3
4
5
6
7
8
9
10
11
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

計算

CSS

1
2
3
4
5
6
7
8
9
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

LESS

1
2
3
4
5
6
7
8
9
10
11
12
@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

LESSを適応する

Javascriptとかで適応する方法もあるみたいですが、 LESSファイルをCSSコンパイルする方法が今のところは無難そうなので、下記の変換ツールを使ってCSSに変換します。 http://lesstester.com/

JSを読み込める環境であれば、下記のJSを適応させた上でLESSファイルを作成すればいいと思います。

1
2
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Downloads: http://lesscss.org/

実業務で使う機会があるかというと、そうでもないんですが、個人的には積極的に使っていきたいところです。

Comments