Tumblrこんにちは。beaglesoftの真鍋です。CSSはデザインを定義するために利用するのですが、画面が複雑になればなるほど管理が難しくなります。CSSでは変数の宣言やクラスのネストができないことがとても不便に感じられます。そこで、ビルド処理を実行することでCSSを出力するようなCSSの拡張機能が幾つか作られました。その中でもRubyと親和性の高いSassについて試してみたのでまとめてみました。この書籍でネット上に散らばっているフロントエンドに関する知識がまとまっているのでぜひ目を通してみてください。SheetsはRubyGemsで提供されいてるのでGemのインストールを行います。installedSassへ変更するCSSを作成するSassを作成する前に通常のCSSを作成したいと思います。以下のURLを参考にしました。Web’Notesの内容を元に作成いたしました。(フォント色などは変更しています。)ありがとうございます。あわせてこのCSSファイルを読み込むHTMLファイルを作成します。</div></body></html>この結果表示されるHTMLは以下のとおりとなります。CSSをSassに変更する次に作成したCSSをSassを利用して書き換えたいと思います。単純にフォントカラーを変数にしてみます。以下のURLを参考にしました。#5BB2C1;を変数として宣言しました。SassからCSSを生成するSassからCSSを生成するには以下のコマンドを実行します。[変換後のcssファイル]ただ、一般的には--watchオプションを付けて変更を監視するようです。[変換後のcssファイル]今回はとりあえずSassファイルをCSSファイルへ変換したいので--watchオプションは付けないで実行したいと思います。example_from_sass.css.mapこの通り、CSSファイルとSassとCSSのマッピングに関するmapファイルも作成されています。生成されたファイルの内容を確認します。以下のURLを参考にしました。*/この通り、たしかに変数が設定されたCSSファイルが作成されています。まとめSassをはじめて利用してみて、とっつきにくい印象があったのですが印象だけでとてもわかり易くそして使いやすいことがわかりました。次回以降はもう少しSassの機能について見ていきたいと思います。ソースコード今回のソースコードは以下のリポジトリにあります。https://github.com/yoichiro-manabe/gulp_example2※リポジトリがgulp_example2となっているのですが、READMEにあるとおりgulpについて試していたリポジトリをそのまま利用したためです。綺麗にリポジトリを管理できていないのですが、そこは「ノリと勢いだけ」で頑張ったということでご容赦を。»スポンサープロフィール合同会社ビーグルソフトのブログです。設立日は2013年8月21日の会社です。までご連絡をお願い致します。SDKのバージョンを指定するphonelibを利用して電話番号を上手に扱うJavaScriptを利用してPDFに設定するフォントが文字化けするValidationAttributreでDIされたオブジェクトを取得するPostgresでUUIDを生成する注目記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。