joppot

コピペで絶対動く。説明を妥協しない

プログラミング

phpでcompassを使った開発の仕方

投稿日:2016年1月22日更新日:

Pocket

compass_with_php_top_thumb

概要

みなさんこにちはcandleです。今回はphpでcompassを使いたいと思います。
compassは別名scssともいいます。

compassはphpのライブラリが既にあります。
しかし、そのライブラリはphpの中にscssを書くようになってしまうので、私としてはいやなので、別の方法をとります。

scssを使う方針は以下のようにします。

compassはgem でインストールして使用します。
compassコマンドでscssを常に監視し、変更があれば、コンパイルしてcssに変換します。
phpはcssに変換されたものを参照するようにします。

前提

gemがインストールされている


compassをインストールする

compassはgemでインストールします。

gem install compass

gem_install_compass

rbenvを使用しているなら以下のコマンドを実行し、compassを読み込みます。

rbenv rehash

compassのインストールの完了です。

phpのプロジェクトを作る

せっかく、comapssがあるので、compassを使ってプロジェクトを作ります。

apacheやmampなどウェブサーバが動く場所に移動します。
私はホームディレクトリのapacheフォルダがapacheのドキュメントルートなので、そこで作成します。

cd apache
compass create cprj

cprjというプロジェクトを作ります。

ちなみに、compassのcreateコマンドは既にフォルダがあってもそこに上書きで作成することができます。
phpで最初はcssを使っていたけど、後々scssを使いたい場合は、目的のフォルダに対して”compass create フォルダ名”することが可能です。

compass_create_prj

cprjフォルダをみると、以下のようになっています。

cprj_folder_status

ここにindex.phpを作成します。

touch index.php

以下を記述します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="./stylesheets/index.css" type="text/css">
    <title>Document</title>
  </head>
  <body>
    <h1>hello</h1>
  </body>
</html>

index_php_require_index_css

上のコードではindex.cssを読み込んでいますが、まだ、index.cssはありません。


compassを実行する

sassフォルダにindex.scssファイルを作成します。

cd sass
touch index.scss

create_index_scss

compassはwatchという機能を使って、常にsassフォルダを見ています。もしも、scssファイルに変更があれば、それをコンパイルして、cssにして同一ファイル名でcssを作成します。

index.scssを作成していたら、stylesheetsフォルダにはindex.cssが自動生成されます。

compass watchします。

phpのアプリケーションルートフォルダに移動して、compassコマンドを実行します。

cd ..
compass watch

run_compass_watch

上の画像を見てもわかるように、index.cssが作成されています。
compass watchを止めずに、sass/index.scssを開いて、以下を記述しましょう。

h1{
  color:red;
}

compass watchをみると、index.cssが変更されています。

compass_modify

apacheで作成したindex.phpにアクセスするとscssで設定したスタイルが適応されています。

scss_style_appied

まとめ

scssを使えば、コーディングはより簡単になります。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

railsのsimple-captcha gemを使用してform_forを使ったフォームを画像認証する

概要 みなさんこんにちはcandleです。公に開かれたフォームはスパムや総当り攻撃を受けやすいです。 そこで、画像認証を導入して、悪意のあるフォームを拒否してみましょう。 simple-captcha …

ruby on railsのckeditorでcarrierwaveを使って画像をアップロードする

概要 みなさんこんにちはcandleです。今回はckeditorの画像のアップロードを行ってみたいと思います。 ckeditorの画像のアップロードは公式githubにも記載されているのですが、まあや …

ruby on railsに最強のwysiwygエディタ、Squireを導入する

概要 みなさんこんにちはcandleです。今回はruby on railsにsquire editorを導入したいと思います。 squireはオープンソースの便利なwysiwygエディタです。 カスタ …

ruby on railsのckeditor gemをapacheのproductionの本番環境で動かす

概要 みなさんこんにちはcandleです。今回はckeditorを本番環境で動かしてみたいと思います。 とは言っても基本的な記述はdevelopment環境と同じなので、そこまでは前回の記事を参照お願 …

railsの多対多リレーションでcounter culture を使用する

概要 みなさんこんにちはcandleです。 今回は多対多のリレーションが貼られているrailsアプリケーションで、counter cultureを使ってレコード数を数えてみたいと思います。 以下のよう …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ