Compassの実践と、オイシックスでの導入事例

対象読者 CSSの基礎知識がある方 SassおよびCompassの導入を検討している方 Compassの主な機能 初めにCompassの機能を紹介します。CompassにはSassを効率よく記載するために、以下の機能が用意されています。 独自のmixin CSSを部品のように扱えるのがmixin（ミックスイン）です。Compassには多彩なmixinが用意されています。使い方はSassと同様で「@include mixin名」と記載することで利用できます。後述する今回のサンプルでは、CSSのbackground-clipをmixinを使用して記載する方法を紹介します。 Compassのmixin一覧 独自の関数 Compassには独自の関数が用意されています。「関数名(引数);」と記載して実行させます。後述するサンプルでは、splite-urlやsplite-positionといったCSS