CSS / LESS / import

CSS / LESS / import

CSSにももとからimportの機能はあるのだがその性能が低いので嫌われガチ。 しかし作る側としてはファイルを整理したいのでこの外部のスタイルを読み込む機能は是非欲しい。

基本

外部のLESSファイルを読む。そのまんまだ。そうするとその場にそのコードが展開される。

@import "hoge.less";

外部のCSSファイルを読む記述を書いた際はこれは普通に CSS ファイルを import したのと同じ挙動になる。

@import "hoge.css";

同じファイルの複数回 import

mix-in は復数のスタイルを固めて共通化できるが、セレクタ構造丸ごと共通化することができない。 import を使うことでセレクタ構造丸ごと共通化して任意の場所にそれを挿入できる。

これにより、詳細度や、セレクタ構造をキープしたままスタイルを共通化できるというメリットが生まれる。(おそらくLESSのというかCSSの思想としてはHTML側のclass等の付与を工夫することでスタイルを共通化するのが筋なのでこのやり方がデフォルトになってない)

しかし問題があって、この import命令はデフォルトで全体で1ファイル1回しか呼ばない仕様になっている。 複数回呼んでも、最初の1回しか呼ばない仕様。

v1.3ぐらいのころにこの仕様になったようだ。

その代わりオプションがありそれをつけることで複数回呼び出しても動作するようになる。

このように括弧して multiple という記述をすると複数回の読み込みが可能になる。

@import (multiple) "hoge.less";

クライアント側の less.js で CSS を import する際にパスの起点が変わる

あくまでクライアント側。あんまりやらないと思うが。 拡張子 lesscss では import の際の挙動に違いがあるので注意。

piyo.less が

@import "hoge.less";
@import "hoge.css";

のようにしてlessとcssをロードした場合・・・

  • less は piyo.less のあるパスを起点にして hoge.less をロードしに行く
  • css は CSSの import として解釈される

ネストしたセレクタ中の import

ある特定のブロックのスタイルを共通化したいのでセレクタを緩く書いてしまうと適用範囲が広がってしまうので、 ある程度緩く書いておいて、後から特定の場所だけに効かせたいという場合がある。

このような場合にネストしたセレクタの中に import を書くことで解決できる

このように書くと

#hoge{
    p{
        color: red;
    }
    @import "hoge.less";
}
#piyo{
    p{
        color: blue;
    }
}

hoge.less

p{
    font-size: 3rem;
}

このように展開される

#hoge p {
  color: red;
}
#hoge p {
  font-size: 3rem;
}
#piyo p {
  color: blue;
}

変数のスコープもそこに書いてあるかのように振る舞う。

css/preproc/less/import.txt · 最終更新: 2021-03-12 12:35 by ore