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

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

laravel Mix

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

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …