WEB-RSS2.0ATOM1.0さすらいのWeb制作家、MAKOCHINがつづるブログサイト。Web制作に関する知識を備忘録的に書いているだけのサイトです。ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。ご興味のある方はどうぞ。さすらいのWeb制作家。Web制作の修行に勤しむ毎日を過ごす。花火大会CSSの効率化になる「Sass」TweetPocket「Sass」とは、CSSの拡張言語です。CSSを普通に書くよりコードを効率よく書くことが出来る為、非常に便利です。書き方はCSSの書き方がベースとなっているので、CSSの知識がある程度ある方なら直ぐに覚えられると思います。Sassを使う為の準備Sassを使うには、Sassで書いたコードをcssにコンパイル(変換)しなければなりません。コンパイルする方法は幾つかあるのですが、「Scout」というソフトを使用する方法が一番簡単そうです。Scoutのインストール方法の詳細はこちら<注意>※Scoutを使う際、変換元と変換先のディレクトリ階層に日本語のディレクトリ名が存在するとエラーが表示されますのでご注意ください。※Scoutを使って変換時に「#3214」のエラーが表示されたら、javaファイルの読み込みパスが間違っていることが原因だと思いますので下記のサイトを参考にパスを修正してください。Scoutのエラーの対処方法はこちらSassの書き方(基本)ネスト親セレクタを何度も書かずに入れ子で記述することが出来ます。「&」:hoverのような擬似要素もネストして管理することができます。指定には&を使います。#04B51E;}変数「$」プログラムコードのように変数を使うことが出来ます。変数は定義されるとそのスタイルシート全体で利用できます。指定には$マークを付けて宣言します。16.66667%;}ミックスイン「Mixins」よく使うプロパティやセレクタをまとめて定義しておいて、必要箇所で呼び出すことが出来ます。一度利用したセレクタを継承して使うことができます。#333;}Sassの書き方参考サイトコーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。cssコメントを残す返信をキャンセルする。