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

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

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

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

no image

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

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

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5e2e1 …