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がインストールされている

SPONSORED LINK


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

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

関連記事

basscss v8以降にv7以前のスタイルを追加する(自分用メモ)

概要 みなさんこんにちはcandleです。今回はbasscssのv8でかなりデフォルトのスタイルから削除されてしまったスタイルをインポートします。 v7以降からbasscssのスタイルはかなり分割され …

CakePHPでhelloworld

概要 CakePHPでプログラミングのお約束helloworldを行いましょう。 helloworldとは動作確認も含めた、一番最初に書くプログラムコードです。 だいたいはhello worldと単純 …

ElastiCacheのmemcachedとEC2上のrailsとdalli-elasticacheを使ってキャッシュ管理する

概要 皆さんこんにちはcandleです。今回はaws上にあるElastiCacheというサービスを使って railsのキャッシュを管理したいと思います。 キャッシュというのはwebサービス上でよく使う …

emacsでplantUMLをplantuml-modeを使って作成する

Autumn leaves on wood table 概要 みなさんこんにちはcandleです。今回はplantUMLをサポートするemacsのplantuml-modeを導入して使ってみましょう。 …

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

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

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ