MacライフハックなぜSassが必要なの?Tweet私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか?」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。Sassとは何かこの記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひとつです。Sass以外にもLESSなどさまざまなCSS拡張メタ言語が存在しますが、アンケート結果を見る限り多くの方はSassを使用しています。ここからはSassを導入するにあたって、多くの方が不安に思うであろうことについて書いています。普通のCSSと書き方が違うのではないか私がはじめてSassを知った時に最初に感じた不安がこれでした。その頃はまだSassが生まれたばかりで、「SASS記法」という通常のCSSとはまったく記述方法が異なる書き方しかありませんでした。orangeしかし、現在は「SCSS記法」というCSSと同じ書き方でSassを記述できます。}※これ以降、この記事ではSCSS記法でSassを記述します。変数はCSSでも使えるので不要ではないか私がSassを知った頃にはまだ、CSSに変数の機能は導入されていませんでした。現在のWebブラウザーではIE11を除き変数を使用できます。IE11はまだ切り捨てるには少し早いということもありますが、CSSの変数機能は残念ながら分かりやすい、書きやすいとはいえません。}それに対して、Sassの変数機能は他のスクリプト言語と似ていて、とても分かりやすく書きやすいです。}そもそもなぜCSSに変数が必要なのかたとえばサイトのテーマカラーやコーポレートカラー、アクセントカラーなどはカラーコードで書くよりも、変数として記述しておくとコードが見やすくなる上に、もし色が変わったときも安全に置換することができます。ルールセットのネストは必要ないのではないかCSSのルールセットというのは、セレクターと波括弧の部分を含めた全体のことを指します。私がSassを知ったばかりの頃、Sassのルールセットのネスト機能をとてもプッシュしている方が多かったと記憶しています。ルールセットのネストとはたとえば通常のCSSで、ヘッダーの中にあるロゴは以下のようにセレクターを指定できます。}それに対してSassの場合はCSSと同じ方法で指定できるだけでなく、以下のようにルールセットをネストできます。}私がはじめてSassを知った時このようなコードを見て、ネストするメリットが理解できませんでした。Sassをすぐに使用しなかったのは「ルールセットをネストする必要性が分からない」というのがとても大きかったです。その後Sassについて改めて調べていた時、たとえば以下のように、a要素にマウスオーバーした時のスタイルを一箇所にまとめて書くことでコードが少し見やすくなるということに気づきました。}メディアクエリが見やすくなるたとえば、「CSSでメディアクエリを使用して、スマートフォンとPCで見た目を変えたい」という場合、以下のように別々に書く必要があります。以下は、ヘッダー部分の左右のpaddingの値をスマートフォンとPCで変更する場合の例です。}Sassの場合ネストを使用してこのようにメディアクエリをルールセットの中に書くことができ、だいぶコードが見やすくなるということに気づきました。}さらに、Sassのmixinという機能を使用すると以下のようにシンプルに書くことができます。「タブレット・PC版の場合」というコメントがなくてもコードが見やすくなったことがわかるかと思います。※別途mixinの定義が必要です。}レスポンシブWebデザインでWebサイトを作る場合、メディアクエリを何度も書く必要がありますが、後々管理が大変になります。Sassを使用することで管理しやすく、また関連があるものを近くに書くことができる(たとえばスマートフォン版の.headerのpaddingとPC版のpaddingを近くに書くことができる)ためコードが見やすくなります。私がSassを導入することを決めたのは、上記のようなコードを書けるということに気づいたときでした。Sassを気軽に試したい方は「Sassをコンパイルするためのアプリケーションやパッケージなどをインストールしていないけれど、Sassを少しだけ試してみたい」という方にはSassMeisterがおすすめです。以下のページをブラウザで開き、左側にSCSSの記法でコードを書くと、すぐに右側にCSSに変換されたものが表示されます。変換されたコードはコピーすることもできます。Playground!Sassについて実践的に学びたい方はすでにHTML・CSS・レスポンシブWebデザインなどが分かる方向けには「1日でわかるSassとBEM講座」を開催しています。次回は2019/11/10(日)開催です。スマートフォンに対応したHTML・CSS・レスポンシブWebデザインを基礎からしっかり学びたい方向けには「スマートフォン時代のWebコーディングスクール」を開催しています。こちら10月18日から開催します。初回体験レッスンを動画で受講することも可能です。スマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。PHP徹底入門講座・WordPressカスタマイズ講座を開きます「PHP徹底入門講座」は、「HTMLはわかるけどプログラミングは未経験」の方向けの日曜講座です。プログラミングを始めてみたい方は、まずはこちらへどうぞ。別途、「WordPressカスタマイズ講座」も開講します。管理画面から更新可能な中小企業サイト」制作までやります。スマートフォンやRetinaディスプレイに対応した新しい内容にリニューアルしました。渋谷にお越し頂くのが難しい場合、ご自宅で動画受講も可能です。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。permalink.AboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。2019年12月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。年末年始にWebデザインを学び直すための3つのステップこの記事は、以下のような方を対象にしています。