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

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

関連記事

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

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

React NativeでGoogle Chrome上でのデバッグ時に動作が遅くなる場合の対処

English 日本語 概要 みなさんこんにちはcandleです。 今回はReact NativeのデバッグでChromeを使うと シミュレーターの動作が遅くなってしまう問題を対処します。 とは言って …

ruby on rails のckeditor gemの機能ボタンをカスタマイズする

概要 みなさんこんにちはcandleです。今回はruby on rails のckeditor gemのショートカットボタンをカスタマイズして自分が必要な機能のみを表示してみましょう。 前提 cked …

railsのaws-sdk gemを使ってs3のフォルダ(folder)を削除する

概要 みなさんこんにちはcandleです。今回はs3にあるフォルダを丸ごとrailsのaws-sdk gemを使用して削除してみたいと思います。 実はこの方法を確立するまですごく四苦八苦しました。なん …

MAMPのSQLiteManagerを使用してsqlite3のテーブルの作成とフィールドの設定、レーコードの挿入を試す

概要 みなさんこんにちはcandleです。前回と引き続き、SQLiteManagerを使用してsqlite3を試してみましょう。 はじめに、書いておきますが、MAMPのSQLiteManagerはSQ …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ