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

CSSを書くときのコツ

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

no image

sassについて

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

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …