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 tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

tableでのヘッダー固定に関して+borderを描く時のコツ

Contents1 tableでのヘッダー固定について2 borderを描く時のコツ tableでのヘッダー固定について 超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 h …