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

tableのレイアウトに関して

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

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …