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写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

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

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