CSSをわかりやすく記述するLESSの使い方

フロントエンドをしないといけなくなるとどうしてもデザインの勉強が必要になってきます。

ですが、今までシステムにデザインは関係なーいと思ってたけど、どうも今後はデザインもデザイナーができれば良いって感じでもなさそうです。

なのでLESSっていうCSSをわかりやすくしてくれるやつを勉強します。

head部に以下を記述します。こうすることで拡張子がlessのファイルにLESSの文法が書けるようになるみたいです。

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>

styles.lessっていうファイルに今回はLESSを書いていきます。

cssと違ってネストすることができます。例えば以下のようなhtmlがあるとします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
<title>LESS</title>
</head>
<body>
  <ul class="aaa">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

ulのclass属性にaaaを指定しているだけです。

入れ子にできる

liのような子のセレクタを入れ子にすることができます。

.aaa{
  li{
    list-style: none;
    &:nth-child(1){
      left: 10%;
      width: 80px;
      height: 80px;
      background:black;
    }
  }
}

&(コンビネータ)を使う

上でも&:を使っていますが、これは親要素と子要素をつなげてくれます。

li:nth-child(1) {～}としているのと同じになります。

list-style: none;はリストの中点を非表示にしているだけです。

デモ

nth-childはul,liでしか使ったことがありませんが、兄弟要素に対して色々出来るようです。

li要素を2つ表示してみます。

.aaa{
  li{
    position: absolute;
    list-style: none;
    &:nth-child(1){
      left: 10%;
      width: 80px;
      height: 80px;
      background:black;
    }
    &:nth-child(2){
      left: 40%;
      width: 80px;
      height: 80px;
      background:white;
    }
  }
}

nth-child

position: absolute;を入れて絶対位置を指定します。

デモ

LESSでは変数が定義できる

LESSでは変数が定義できてプログラムっぽくなっています。

変数名は頭に@を付けます。

@width=80px;
@height=80px;

などです。

上のサンプルで変数を使ってみます。動きは全く同じになっているはずです。

@width=80px;
@height=80px;
.aaa{
  li{
    position: absolute;
    list-style: none;
    &:nth-child(1){
      left: 10%;
      width: @width;
      height: @heigth;
      background:black;
    }
    &:nth-child(2){
      left: 40%;
      width: @width;
      height: @height;
      background:white;
    }
  }
}

デモ

変数で関数を使用する

LESSでは関数も使えるので便利です。

同じような記述で値だけ異なるような場合は関数を作成したほうが良いかもしれません。

body{
  background: #00CCFF;
}

@left:0%;
@width:0px;
@height:0px;
@bgcolor:white;
.aaa{
  li{
    position: absolute;
    list-style: none;

    // 関数
    .config(@left: 30%, @width: 0px,@height: 0px,@bgcolor: white) {
      left: @left;
      width: @width;
      height: @height;
      background: white;
    }


    &:nth-child(1){
      .config(10%, 50px, 50px, black);
    }
  }
}

デモ

もっと知りたい方は公式サイトをご覧ください。

LESS