かなり便利！LESSを少し使ってみました。
案件でなにかしらのCSSプリプロセッサを使ってくれとのことだったので、導入が簡単そうなLESSを使用してみました。
前から便利そうだなと気になってはいたものの、使用には至らなかったのですが、
やはり使ってみると便利なことを再確認しました。
CSSプリプロセッサというのはCSSを効率良くかけるツールだそうで、今回のLess、Sass、Stylus等あるみたいです。
それぞれによって特徴はあるみたいですが、大まかな機能は共通しているようです。
Lessの導入のメリットとして僕がいいと思うのは、
・頻繁に使うプロパティを設定できる
→色やボーダー、角丸、シャドウを最初に設定し使いまわせる
・ベンダープレフィックスを一箇所にまとめておける
→CSS３のベンダープレフィックスをいちいち書かなくてすむ
Lessの導入
まずは、関係ファイルをダウンロードします。
今回はjsを使用する場合の導入になります。
jsの方を後に読み込みます。
|
1 2 | <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> |
僕は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
|
1 2 3 4 5 6 7 8 9 | @fColor: #555555; body { color: @fColor; } h1 { color: @fColor; } |
コンパイル後css
|
1 2 3 4 5 6 7 | body { color: #555555; } h1 { color: #555555; } |
頻繁に使う色を関数として使いまわせるので、
色を統一することができます。運用していくと色を忘れがちなので助かりますね〜
ミックスイン
Less
|
1 2 3 4 5 6 7 8 9 10 11 12 | .border { border: 1px solid #000000; } .btn { display: block; .border; } .bnr a { margin-bottom: 20px; .border; } |
コンパイル後css
|
1 2 3 4 5 6 7 8 | .btn { display: block; border: 1px solid #000000; } .bnr a { margin-bottom: 20px; border: 1px solid #000000; } |
クラスやidを上記のように使いまわせます。
さらに、
less
|
1 2 3 4 5 6 7 8 9 10 11 12 | .border(@bWidth: 1px) { border: @bWidth solid #000000; } .btn { display: block; .border; } .bnr a { margin-bottom: 20px; .border(5px); } |
コンパイル後css
|
1 2 3 4 5 6 7 8 | .btn { display: block; border: 1px solid #000000; } .bnr a { margin-bottom: 20px; border: 5px solid #000000; } |
入れ子
less
|
1 2 3 4 5 6 7 8 9 10 11 | #header { width: 100%; li { width: 100%; margin-bottom: 20px; a{ display: block; color: #ff0000; } } } |
コンパイル後css
|
1 2 3 4 5 6 7 8 9 10 11 | #header { width: 100%; } #header li { width: 100%; margin-bottom: 20px; } #header li a { display: block; color: ; } |
関数と演算
色や数値の対して足し算、引き算、割り算、かけ算を行うことができるようです。
less
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | @border: 1px; @base-color: #111; @color: #842210; #header { background-color: @base-color * 3; border-left: @border; border-right: @border * 2; } #footer { background-color: @base-color + #003300; border-color: desaturate(@color, 10%); } |
コンパイル後css
|
1 2 3 4 5 6 7 8 9 | #header { background-color: #333; border-left: 1px; border-right: 2px; } #footer { background-color: #114411; border-color: #7d2717; } |
まだまだ、いろんな活用ができるようです。
詳しくは下記リンクでご覧ください。
Author Profile
スターフィールド編集部
SHARE
