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

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

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

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

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …