skillup

技術ブログ

デザイン

lessサンプル

投稿日:

lessのサンプル

lessファイル構成

  • header,footer
  • sytle 変数
  • lib 関数
  • common headerなどの共通部分を@importで読み込む共通モジュール
  • top ページ自体 commonを@importで読み込む

commonで全部読み込み、それをtopが読み込む。topで読み込めばすべてコンパイルされる。例えばheaderのcssもtopの中にはかれる。

ソース

https://github.com/umanari145/css/commits/master

注意点

  • 実務ではオートコンパイル(保存した瞬間にコンパイル)しないとスピード的に難しい。
  • import呼び出し側で記述しておけばそこだけコンパイルすれば呼び出される側(この場合、commonやstyle,lib,header,footer)も自動でコンパイルされるので、極論呼び出しもとだけコンパイルすればOK。

参考リンク

Atomの「less-autocompile」でLessのコンパイルをラクにしよう

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …