skillup

技術ブログ

デザイン

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

投稿日:2017年10月8日 更新日:

lessって?

CSSの保守性を向上させるライブラリ。これを使うことでcssが圧倒的に便利になる。

スコープが使える

階層を作ることで他の部分への影響を抑えることができる。これはかなり大きい。

変数が使える

特によく使う色を変数化したり、サイズなどを変数にしておける。またちょっとした計算もできる。

関数化

主にCSS3でのboxshadowなどを関数化しておき、変数を与えることで記述量を大幅に減らせ、保守性を向上できる。

インポート

インポートなどを使うことで部品化ができる

例えば定数系、ヘッダー系、各自のCSS系

CSSをシンプルに書くことができるLESS使ってみた

LESSでCSSを書いてみた

インストール

rubyかnodeがインストールされていることが大前提。

ruby(正確にはgemまでインストールしていないとダメ)

node

どちらかというとnodeが一般的なようです。

ちなみにwindowsだとless.js-windowsというソフトがあると楽です。これ一発で済みます。

WindowsにLess環境を作ってless2cssで保存時に自動生成させる

コンパイル

実際にはエディタやIDE、gulpなどで保存した瞬間にコンパイルするようにするほうが望ましい。

-デザイン
-,

執筆者:


comment

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

関連記事

no image

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

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

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …