1CLOSESEARCHHOMEABOUTSITEMAPCONTACTWORK全角チェッカーギャル文字TwitterHOMECSSSassで管理しやすいレスポンシブコーディングをしようSassで管理しやすいレスポンシブコーディングをしよう2019年1月9日CSSツイートシェアはてブ送るPocketCSSのメタ言語であるSassを覚えたらメチャクチャ便利でした。今回は、中でも特に便利だと思った変数を使ったブレイクポイントの管理について解説します。室井まだCSS使ってるの?時代はSassですよ。使ってない人は導入しましょう。Sass(Scss記法)は敷居も低いので覚えるべきメディアクエリを簡潔に記述するCSSを使ってメディアクエリを書く場合、以下のようなコードになります。これは幅が768px以下のときだけスマホ用のメニューバーを表示する場合の例です。適用するためだけに、5行も記述しなければいけません。none;}}同じコードをSass(Scss記法)で書くと以下のように書けます。none;}}メディアクエリの部分が3行になりましたね。@includeを使って@mixinで定義したコードを呼び出しています。コードを呼び出せます。{@content;}}メディアクエリで指定している$smや$mdは変数です。SassではCSSと異なり変数を利用することができます。僕は変数を記述するためのファイルを別に用意して、以下のようにブレイクポイントを管理しています。することで、後からブレイクポイントを変更する必要が出たとしても最小限の修正で済みます。引数を渡すこともできます。書くのが面倒であれば、以下のような記述もできます。{@content;}}この場合、768pxを超えたら非表示にするコードは以下のようになります。none;}Sass(Scss記法)は敷居も低いので覚えるべきSassにはSass記法とScss記法がありますが、Scss記法はCSSと同じように記述しても動きます。CSSはわかるけどプログラミングはあまり経験がないといった方でも勉強しやすいです。いった便利な機能が使えますし、行数も少なく読みやすいです。CSSにもCSS変数とかあるらしいんですけどね。その辺りはまだ僕も勉強していないので、習得したらそのうち記事にします。Sassの勉強は、Progateのレッスンをやって参考書を読むのがよいでしょう。2017-09-15AmazonKindle楽天ブックス僕は普段、参考書を全力でおすすめしません。人によって参考書との相性があると考えているので、僕はこれを使って勉強したというのを紹介しています。この参考書は全力でおすすめします!実用的な解説が多く、手元に置いておきたいと思える1冊です。室井そもそもSassの参考書ってそんなに種類ないんだよね。みゅうコーディングはBracketsがおすすめです。プラグイン入れるだけで自動でコンパイルしてくれるようになります。コメントをキャンセルメールアドレスが公開されることはありません。*サイトRECOMMEND関連記事は見つかりませんでした。SilverPCとかDbDとか、自分の興味のあることについて書いてます。