Blog

かなり便利!LESSを少し使ってみました。

案件でなにかしらのCSSプリプロセッサを使ってくれとのことだったので、導入が簡単そうなLESSを使用してみました。

前から便利そうだなと気になってはいたものの、使用には至らなかったのですが、
やはり使ってみると便利なことを再確認しました。

CSSプリプロセッサというのはCSSを効率良くかけるツールだそうで、今回のLessSassStylus等あるみたいです。
それぞれによって特徴はあるみたいですが、大まかな機能は共通しているようです。

Lessの導入のメリットとして僕がいいと思うのは、
・頻繁に使うプロパティを設定できる
→色やボーダー、角丸、シャドウを最初に設定し使いまわせる
・ベンダープレフィックスを一箇所にまとめておける
→CSS3のベンダープレフィックスをいちいち書かなくてすむ

Lessの導入

まずは、関係ファイルをダウンロードします。
今回はjsを使用する場合の導入になります。

内に以下を追加します。
jsの方を後に読み込みます。

僕はsublimetextを使っているのですが、
lessファイルは、そのままだと色も変わらずわかりづらいです。
なので、パッケージインストールで「less」をインストールすると、右下のファイル形式変更する箇所にlessが出てきます。CSSと同じ見た目になります。

lessファイルがローカルですと、firefoxできちんと表示されるのですが、chromeでは表示されません。

僕はmacなので、macのアプリ「Automator」で「シェルスクリプトを実行」で、
open -a Google\ Chrome –args -allow-file-access-from-files
を記入し、保存し、そのアイコンからchromeを実行すると表示されます。

詳しくは下記サイトをご覧ください!
【小ネタ】Chromeのローカルセキュリティポリシーの回避 | Developers.IO

Lessの機能

変数

Less

コンパイル後css

頻繁に使う色を関数として使いまわせるので、
色を統一することができます。運用していくと色を忘れがちなので助かりますね〜

ミックスイン

Less

コンパイル後css

クラスやidを上記のように使いまわせます。

さらに、

less

コンパイル後css

入れ子

less

コンパイル後css

関数と演算

色や数値の対して足し算、引き算、割り算、かけ算を行うことができるようです。

less

コンパイル後css

まだまだ、いろんな活用ができるようです。
詳しくは下記リンクでご覧ください。

LESS – The Dynamic Stylesheet language

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ