【Sass/Less/Stylus】たった2行書くだけ!CSSプリプロセッサ入門【習うより慣れろ】

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。今回はCSSプリプロセッサを最小限かつ効果の高い機能から導入して、実際に使いながら少しずつ覚えていくと良いよ、という話です。

目次

CSSプリプロセッサって?

みなさんSassやLessは耳にしたことがあると思います。Stylusはもしかしたら聞き馴染みの無い方もいるかもしれません(StylusはSassとLessの良いとこどりをしたようなものです)。これらを総称してCSSプリプロセッサと呼びます。変数が使えたり、入れ子構造にできたりしますね。

最近のプログラミング学習サービスでは大抵Sassの教材があるので、触ったことがある方も多いでしょう。しかし、これらは意外と機能が複雑で覚えにくかったり、あまり理解していない状態で使うとむしろ変なコードを生み出す原因になります。

そこで今回は「習うより慣れろ」ということでもっともコストパフォーマンスの高い、「メディアクエリ簡略化」だけを紹介します。

メディアクエリ簡略化

個人的に、メディアクエリの書き方はかなり面倒に感じています。以下に例を出します。

普通に書くとこうなりますよね。ここで僕は言いたい。

「なぜセレクタを2回書かせるの???」

そもそもメディアクエリの記述が長いこと自体面倒なのに、同じものを2回書くのはさらに面倒。
なので、これを短く書く為だけにでもCSSプリプロセッサを使いましょう。ここではあえて変数のみを用いて実装します(最小限の機能ですからね)。

先にコードを載せてしまいます。変数を使うためにたった2行書くだけで一気にメディアクエリをスマートにかけるようになります。

Sass

Less

Stylus

出力(どのプリプロセッサでも同じです)

解説

まず、どのプリプロセッサでも入れ子構造でメディアクエリが書けます。書き方も一緒です。

これだけでも大分良くなっています。セレクタの記述が1回でいいのと、コードがまとまって見やすくもなります。
ここからさらに”screen and (max-width: 768px)”の文字列を変数に格納します。(一応変更を意識して数値は別の変数に入れておきます)

ダブルクウォーテションで囲むと、基本的に中は単なる文字列として認識されます。Lessはその中で変数を認識させるために、このタイミングで~や{}を使ってエスケープさせます。

次に@mediaに続いて変数を用います。

Sassの変数はそのままではプロパティの値以外には使えません。どうしても使いたい場合は、このタイミングで#{}で変数を囲う必要があります。

こうやって比べてみるとStylusがもっともスマートですね。

まとめ

いかがでしたか。機能が多くてどう使えばいいか分かりにくいCSSプリプロセッサも、まずは最小限の機能から使ってみると慣れてきます。そこから新しい機能を少しづつ覚えましょう。(&で親セレクタを指定する方法やmixinなど)

参考に、それぞれの公式ドキュメントを載せておきます。全体的にそうですが、特にLessの公式は非常に読みやすいので一度は読んでみるのをお勧めします。

Sass:https://sass-lang.com/
Less:http://lesscss.org/
Stylus:http://stylus-lang.com/

2019/4/10追記
タイトルと内容に一部修正を加えました。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください