Queriesの利用方法とその難点,LESSのコンパイラを利用して少しラクする記法をご紹介しました。今回はさらに掘り下げて,処理をmixinとして作成し,LESSのメリットを最大限活かす方法をご紹介します。自動化のポイントまず,前回のコードをおさらいしておきましょう。}}@mediaを毎回書くのは大変ですし,ミスタイプをする確率も高くなります。それならば,まとめてmixinにしてしまうほうが効率的です。考え方としては,以下のルールの下に自動化を進めます。以下がmixinの全体像となります。}}今までご紹介してきたmixinのなかで,一番複雑なものになってしまいました。処理の1つ1つは今までご紹介してきた範囲内のものです。1行ずつ見ていきましょう。画像の情報を定義する.switch-ratio(@url,@width,@height){まず,.switch-ratioという名前のmixinを作り,以下の引数を定義します。_2x;Retina用画像の名前のルールを定義している部分です。ここでは,ファイル名の末尾(拡張子は含まない)に「_2x」を付けるルールとしました。@height;背景として定義する画像の大きさは,実表示サイズとなるので,Retinaでも非Retinaでも大きさは同じです。そのため,先ほど設定した引数@widthと@heightの値をそのまま当てはめます。Displayだったら)という条件分岐です。~`"@{url}".replace(/\.gif|\.jpg|\.jpeg|\.png/,"@{postfix}"+"$&")`;ぱっと見てすごく複雑になってしまいましたが,本連載の第5回でご紹介した「JavaScriptで文字を編集する」を応用したものです。,@urlの値を文字列として解釈するために,@{url}として記述します。その上で,urlの文字列に対して.replaceを利用し,「拡張子が.gifか.jpgか.jpegか.pngだった場合,ファイル名の末尾に@{postfix}(今回の場合は「_2x⁠」⁠)を追加するという処理をJavaScriptで行っています。出来上がった値を,@url_x2という新たな変数に定義しています。複雑になってしまったのは,正規表現を用いているためです。本連載ではJavaScriptの解説までは行いませんが,JavaScriptで文字列を編集できるのはLESSの大きな特徴です。url(@url_x2);こちらで先ほど作ったRetina用のファイル名(@url_x2)を,background-imageに設定します。url(@url);}こちらは第8回でご紹介したコードと同様です。-webkit-device-pixel-ratio:1の場合には,Retina用ではない,元のファイル名(@url)を設定します。これで,Retina用/非Retina用の画像を切り替えられるmixinの完成です。あとは以下のように,画像名/画像サイズを引数に入れて,各所で呼び出せば,かんたんに画像を切り替えられます。.switch-ratio('bg.gif',320px,480px);いかがでしたでしょうか?JavaScriptによる文字列の編集や,@mediaによる特殊な記述方法も含めて,mixinを作成してみました。今までの連載の中で一番難しい内容となりました。その分,一度作ってしまえば,今後記述がよりかんたんになります。後からコードを読み直す際も,意図が明確になり,理解が早まります。このような複雑なmixinにも挑戦してみてください。LESSのコードの書き方は,本回まででいったん終了とします。mixin著者プロフィール宇野雄(うのゆう)UI・UXデザイナー。ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。1位は,LESS入門とSassとの比較,気になるネタは,GALAPAGOSは撤退しない。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。