16,671viewsこんにちは、先日第一子が誕生し父になった奥田です。生まれてすぐ新生児室の前で一眼レフで写真を撮りまくるといういきなりの親バカぶりを発揮しまくっていますが、良き父になれるよう精進してまいりたいと思います。個人的には普及しだした当初から使っているので割と今更感はありますが、今回はSassのご紹介です。僕はあまり複雑なことはせず、CSSのネスト化やちょっとした変数の持ち回りなどで使っています。この記事で少しでもSassに興味を持っていただけると幸いです。contentsSassとは?インストール使い方SASS記法とSCSS記法Sassでできること最後にSassとは?Sass(サース)※とはCSSを変数やmixinと呼ばれる関数を使って書くことができるRuby製のCSSメタ言語です。複数のSassファイルをimportし、コンパイルすることで一つのCSSにまとめることもできます。※日本では「サス」と呼ばれることが多いです。Stylesheets)は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。用の拡張が加えられた。https://ja.wikipedia.org/wiki/SassインストールSassをインストールしてみましょう。Windowsの人はRubyInstallerからRubyをダウンロードしてインストールします。Macの人はすでにRubyが入っているのでインストールする必要はありません。ターミナルまたはコマンドプロンプトから以下のコマンドでRubyのバージョン情報が出力されればRubyが入っているということです。[universal.x86_64-darwin16]あとは以下のコマンドでSassのインストールが完了します。sass同じくバージョンを確認すればインストールできているのがわかると思います。Steve)使い方コンパイル以下のコマンドで指定したscssファイルをコンパイルしcssファイルへ出力することができます。input.scss:output.css監視Sassは変更を監視することができます。フォルダー内のファイルやファイル自体に変更があった際にコンパイルします。input.scss:output.css僕はこのコマンドで毎回記述するのは面倒なので「gulp」というタスクランナーを使っています。この記事ではgulpの使い方は割愛します。フロントエンドの環境を極めたい方は以下の記事を参考にしてください。実際にどのように記述するのかを見ていきましょう。複数書かなくてはならず、冗長になってしまいます。color:#333;}Sassではセレクターをネストすることができるので、以下のようにして書くことができます。10px;acolor:#333;ただ、この書き方はCSS使いの方にはあまり書きやすいものではなく、後にSCSS記法というものが登場しました。10px;a{color:#333;}}}CSSに慣れている人でも見やすくわかりやすいですね。SassでできることSassでできることはネスト(入れ子)だけではありません。使うものを抜粋してご紹介致します。ネスト(入れ子)できる先程の例のようにセレクターをネスト(入れ子)することができます。変数が使えるSassでは変数が使えます。サイトのメインカラーやサブカラーを一気に変更する修正が入った際に値を書き換えてコンパイルすると一気に変更が可能になります。「$」マークから始まる変数名を設定することで使いまわすことができます。mixin(関数)が使えるSassではmixinと呼ばれる関数のようなものを使えます。mixinとは似たような処理を、呼び出す際の引数で変更できるものです。ベンダープレフィックスが必要なものをひとまとめにしておけば一回の記述ですべてを書くことができます。使用することができます。importできる変数やmixinなどのファイルを別ファイルにしインポートすることができます。ページごとのファイルや、エレメントごとのファイルを作成し一箇所でインポートしてコンパイルすればひとまとめにすることができます。"./mixins.scss"最後にSassの登場でコーディングが飛躍的に速くなりました。プログラミングは少し苦手な印象をお持ちの方もCSSを少し楽に書けるという感覚ではじめられますので是非試してみてください。menuWorksBlogInformation。