orebike@gmail.com

CSS/LESS

なにが出来るかといえば、単に便利にCSSをインライン展開してくれるだけのツール

Sassと似たようなもの。パーサーがJavaScriptで実装されているというのが特徴的

変数

変数を宣言できて、値の一括変更ができる

@hoge: #AAA;
#piyo{
    border-bottom: 1px solid @hoge;
    background-color: @hoge;
}

変数にはスコープがある。ブロック毎にスコープが切られる。外部のブロックで作られた変数はその内部でも有効になる。

元々CSSのクラス指定には設定を一括で変更するという役割があったわけだが、それを静的にインライン展開してくれるのがこの書き方

.hoge (@piyo: 5px) {
    top: @piyo;
    left: @piyo;
    width: @piyo;
    height: 30px;
}
#fuga1{
    .hoge(10px);
}
#fuga1{
    .hoge;
}

一部の設定を展開する時に指定する引数的な機能もある。指定しなければ作った時に指定したデフォルト値が入る

特にこれはベンダープレフィックスをたくさん付ける場合に非常に効果的になる。

通常は要素を絞り込む際にセレクタを連結して絞り込む。同じ要素の配下の要素の絞込みは都度各要素指定をしなおさないといけなかったが、 LESSでは入れ子のすることで一括で書ける。

#hoge{
   color: #000;
   h1{
       border-bottom: 2px solid #F00;
   }
   h2{
       border-bottom: 1px solid #0F0;
   }
}

こう書くと子孫セレクタを書いたことになる

#hoge{
   color: #000;
}
#hoge h1{
   border-bottom: 2px solid #F00;
}
#hoge h2{
   border-bottom: 1px solid #0F0;
}

子孫以外のセレクタをやる場合は

#hoge{
   color: #000;
   &.fuga{
       border-bottom: 2px solid #F00;
   }
   &.piyo{
       border-bottom: 1px solid #0F0;
   }
}

このように&をつけてそいつに対してセレクタを書くと上位の範囲を引き継ぐことができるようだ。

#piyo{
    border-bottom: 100px + 10;
}

変数も使える

@hogeWidth: 100px;
#piyo{
    border-bottom: @hogeWidth + 10;
}

LESSのパーサーは全てJavaScriptで実装されていてNode.jsとかの環境で駆動する。当然ブラウザでも駆動するから開発中のお手軽環境構築はブラウザでOKだと思う。

注意としてLESSのスクリプトはprototypeを結構拡張するのでそこのところだけ注意

CSS も年々高性能になってきていて、LESS の機能と同等になってきているので記法がバッティングしてしまう場合がある

そのような場合 LESS 側の解釈がはたらかないようにコンパイルを抑止する必要がある。

その時はこのようにチルダに続きダブルクォートで挟む。

width: ~"calc(100% - 300px)"

こうするとその部分は解釈されず、その文字列がそのまま出力される。この場合はこの数値演算部分が CSS の文法と LESS 文法でバッティングしてしまっている。

異なる単位での演算なので、LESS は解釈してないので、100％がどのぐらいの大きさになるのかがわからない。つまりLESS側では答えが出せない。

CSS 側ではブラウザが解釈するので大きさが計算できる。

これは計算っぽいあらゆる表記の部分に発生していて CSS Grid では対象の配置をスラッシュ区切りで指定したりするのだが

grid-column: 2 / 4;

この部分が計算されたりする。なのでこの結果はこのようになり。値として無効になるので思いがけない挙動になる。

grid-column: 0.5;