前回はLESSが解決してくれる悩みと,less.jsの利用法をご紹介しました。今回はいよいよ実際にLESSを書いていきましょう。いえ,LESSの記法の中でもよく使われるものと,あまり使われないものがあります。今回は初級編として,LESSを使うなら必ず覚えておきたい記法と,その活用法,注意点などを見ていきましょう。LESSで基本として押さえておくべきは下記6点です。ネスト変数ミックスイン演算コメントインポートこれだけでもCSSのコーディング速度が1.5倍くらいになり,十分にLESSの恩恵にあずかれます。順番に見ていきましょう。コードの見かたは以下のとおりです。~CSSのセレクタを入れ子にするネストとは,以下のようにCSSのセレクタをどんどん入れ子にして書いていくことです。1px;}「こう書ければ楽なのになー」と,一度は考えたことはないでしょうか?ネストを使うと,記述量が減るだけではなく,HTMLの文書構造に近づくため,メンテナンス性も高まるのが大きな利点です。ネストの落とし穴ネストは非常に便利なのですが,あまりに利用する必要がないセレクタを記述してしまうと,非常に冗長なCSSが生成されてしまいます。}}しかし,生成結果は以下のようになります。#ff0000;}全体の構成にもよりますが,せっかく#homeというIDが付いているのですから,以下で十分な内容です。#ff0000;}idを単体で指定したほうが,子孫セレクタを指定するよりも描画速度が速くなります。ネストは非常に便利な機能ですが,うまく活用しつつも,生成結果を常に意識して利用するようにしましょう。~繰り返す処理を一元管理デザイナーの方は,ベースカラー/アクセントカラー/メインカラーなどをあらかじめ決めておいてデザインすることが多いのではないでしょうか。コーディングの際,結果的にCSSの各所で色宣言をしていることでしょう。そのような繰り返し宣言をせず,一元管理できるのが変数です。以下のように@colorで宣言をした#4D926Fは,それ以降すべて@colorで呼び出すことができます。@以降の文字列は任意のもので構いません。#4D926F;}@colorのように一色に限らず,以下も宣言しておくと便利です。@baseColor@accentColor@mainColor筆者の場合は,統一したい余白の幅やフォントサイズを指定したりもしています。これらはクラス名として宣言しておけば機能的には同様のことができるかもしれません。それはHTMLとCSSの原則である「構造とデザインの分離」を無視した宣言となってしまします。,「⁠やはり特定のタグのみ色を変えたい」という時に,CSSとHTMLの両方を修正する必要があるため,保守性も悪くなります。変数を使えば,構造とデザインの分離を実現しつつも,デザインの使い回しができ,非常に都合が良いのです。アクセントカラーとメインカラーをあえて同じ色にする場合もあるかもしれませんが,同様のページを作る場合でもコードを流用することを考えて,以下のように記述を分けておくと便利でしょう。@mainColor;このように仮に同じ内容でも書き分けをしておくことで,デザインの変更があった場合でも工数を削減できるでしょう。CSS上での文字列一括置換ではできない,LESSならではの利点ですね。著者プロフィール宇野雄(うのゆう)UI・UXデザイナー。ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。