31日コーディング速度を3倍早くするSass(Scss)のフレームワーク”Compass”が本当に便利カテゴリ:Sassタグ:CodingSassScssコーディング効率化44000390\CSSのメタ言語Sass(Scss)。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。1.Compassとは2.インストール3.初期設定4.Sass(Scss)ファイルをCSSファイルに5.実際に作る6.参考文献compassとはオープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使えるようになったものがcompassです。コンパイルやウォッチなどはSassと同機能がありますが、コマンドがより簡素になっていたりと実際に使う上でもより使いやすくなっています。インストールSass同様利用するにはRubyが必要になります。Rubyのインストール等に関しては以前書いた(Sassに関する記事)を読んでいただければと思います。今回すでにRubyやSass(Scss)はインストールされているものとしてCompassのインストールから始めます。上記でインストールが完了したのでCompassコマンドを使って開発環境を作っていきます。下記Compassコマンドを入力して実行すると指定しているディレクトリに下記ディレクトリやファイルが生成されます。出来上がったファイルの中にconfig.rbというファイルが有ります。これはSass(Scss)ファイルやCSSファイルの吐き出し先などを設定するファイルで、このファイルを書き換えることで、コンパイルしたファイルを何処に書き出すかといった設定を行うことができます。"javascripts"Sass(Scss)ファイルをCSSファイルにSass(Scss)単体の時と同じくファイルをコンパイルするのにwatchを使います。watchしてるとSassファイルを保存した際に自動的にコンパイルしてくれるので非常に便利です。watchコマンドも記述方法がSassよりも短くなっていてより楽になっています。実際に作るCompassやSass(Scss)で実際に作るに当たっての解説です。様々な機能があり最初から全部やろうとすると混乱する可能性もあるので少しづつやってみると良いと思います。Sass(Scss)に関する解説は以前書いた(Sassに関する記事)を参照下さい。リセットCSSブラウザのデフォルトスタイルを調節するリセットが定義されています。"compass/reset/";上記を記述することでCompassで定義されたスタイルが、コンパイルされたCSSファイルに記述されます。@import必要な機能をimportして利用します。CSSのimportとは違い、一つのファイルへ結合してコンパイルしてくれるのでファイルが複数になりません。"compass/css3/transform"上記のような形で、必要なものを必要な時にimportして使えます。CSS3をスタイルしていく場合は予めcompass/css3/をimportしておく必要がありますので、忘れないようにしましょう。アンダースコア付きファイルによるモジュール化@importを使うことで、機能毎にscssファイルを分けてimportすることも可能です。通常通りでwatchしているとSass(Scss)ファイルはすべてCSSファイルにコンパイルされてしまうのですが、モジュール化するファイルはその必要がなく、最終のcssファイルにだけコンパイルされれば良いです。それを解決するには、モジュール化するSass(Scss)ファイルの名前の前に(_)アンダースコアを付けることで解決できます。ベンダープレフィックスCompassではベンダープレフィックスが必要な記述においてすでにMixinで定義されています。そのため実際のコーディング時には@includeを利用しそれらを呼び出すことでより簡素な記述によるコーディングが可能になっています。本記事では全てSassではなくScssにてCompassに記述してコンパイルしています。ベンダープレフィックスは正式な勧告やブラウザのサポートによって外せるようになります、ですが今回はCompassについてサラッと解説がしたかったのでそのあたりは踏まえずにサンプルを出しています。それが必要か否かはご自身で判断して記述していただければと思います。3s;これらは一部です。CSS3のページにデモ等が掲載されているので、そちらを見て確認してみてください。上記のベンダープレフィックスと重複してしまいますが、Compassでは様々なMixinが定義されています。中でもCSS3に関する定義が多くCSS単体で利用するより非常にCSS3が利用しやすくなっています。format('opentype');CSS3の記述に関してはCSSでの記述と比べ大きく変わっているものありますので、少し注意が必要です。参考文献Compassはまだまだ他にも便利な機能があり、それらを活用するともっとコーディング速度が増します。ベースがSass(Scss)なので、そちらを既に利用されている方はすんなり使えるかと思いますので、是非使ってみて下さい。DocumentationCSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。:howtohpお役に立てたらお願いします🙇AdShare44000390Relatedコーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。[書評]「Web制作者のためのSassの教科書」GulpによるPug、Sass、ブラウザーシンクなどを盛り込んだ開発環境「Speedy」を公開しました。HTML5、CSS3に関する情報まとめ。コメントをキャンセルメールアドレスが公開されることはありません。はじめましたRish-DesignフリーランスのWebデザイナーとして独立しました。お仕事お待ちしています。枚方で電源・Wifi完備の仕事や勉強ができるコワーキングスペースSHINCRU。写真素材を無料(フリー)で配布しているストックフォトサービスです。GoodsSUZURIにてオリジナルグッズ販売しています。写真AuthorWebデザイナーのYATです。Webデザイン、コーディング、プログラミング、プランニング、ディレクションと幅広く行なっています。