joppot

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

プログラミング

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

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


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

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

関連記事

phpとmysqlでアカウント管理する時のテストユーザーのパスワードの暗号化はmysqlのsha1でもできる

by brewbooks 概要 みなさんこんにちはcandleです。最近はphpでサービスを書いたりしています。その中でテストユーザーのアカウント管理でパスワードを暗号化してデータベースに収めています …

ruby on railsでpdfファイルをダウンロードさせる

概要 みなさんこんにちはcandleです。pdfファイルのダウンロードのやり方を紹介します。 前提 railsの環境が出来ている twitterbootstrap gem を使用した環境で説明して行き …

ruby on railsで出力されるlog(ログ)のフォーマットを変更する

概要 みなさんこんにちはcandleです。今回はrailsのログに関する記事です。railsは決まった記述でログを出力します。 webアプリケーションを実行中におかしな挙動が合った場合はこのログをもと …

MAMP2.2上でのPHP5.3.27のpearの使い方と動作確認

概要 みなさんこんにちはcandleです。今回はMAMPのpearの使い方と動作確認です。 pearというのはphpのライブラリ群の様なもので、便利なライブラリがそろっています。 中にはなぜ、これがp …

Rails pluginを使ったgemの作り方[4](controller helper編)

概要 みなさんこんにちはcandleです。今回はgemの中枢とも言えるhelperの作り方です。 helperというのは様はgemにすることで便利になる関数を作るとというイメージです。 例えば、con …

  • English
  • 日本語

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