PHP製サーバー上でSCSSをCSSに変換するプログラム

assets/scss/*.scss と assets/css/*.css を双方向に同期します。

SCSS→CSSの変換には https://github.com/scssphp/scssphp を使用しており、変数・ネスト・mixin・@extend・@if/@each/@for・darken()等の関数を含む「Sassの主要機能」をフルサポートします。

- SCSSを編集 → 自動的にコンパイルされてCSSに反映

- CSSを直接編集 → 内容をSCSSファイルに書き戻し

⚠️PHPが少しわかる人向けです

⚠️初回のみ「composer install」が必要です。

↑ サポートしませんので調べた上でご購入ください！！！！

【使い方】

■CLI(SSHが使える場合)

```bash

php compile.php # SCSS→CSSを1回だけ全ファイル強制コンパイル

php sync.php # 双方向同期を1回実行(更新日時が新しい方を優先)

php watch.php # 監視モード。保存するたびに自動同期し続ける(Ctrl+Cで停止)

```

■ブラウザ(SSHが使えない場合)

アクセスすると更新されます。

https://あなたのドメイン/scss-css-sync/api/sync.php

■cron

cron設定例(5分ごとに同期)

*/5 * * * * php /home/あなたのユーザー/www/scss-css-sync/api/sync.php > /dev/null 2>&1

■既存ページで自動同期させたい場合

PHPに下記を記述。/path/to/はscss-css-syncが置いてあるフルパス。

<?php require '/path/to/scss-css-sync/auto-sync.php'; ?>

【動作要件】

- PHP 7.4以上(scssphp ^1.12の要件)

- Composer(初回インストール時のみ)

パスの変更方法

assetsディレクトリの場所を変更したくなった場合は、「config.phpを書き換えるだけ」で全スクリプトに反映されます。他のファイル(compile.php, sync.php, watch.php, api/sync.php, auto-sync.php, includes/*)は一切触る必要はありません。

■ config.php

return [

'scss_dir' => __DIR__ . '/assets/scss', // ← ここを変更するだけ

'css_dir' => __DIR__ . '/assets/css', // ← ここを変更するだけ

'state_file' => __DIR__ . '/.sync-state.json',

'auto_sync_lock_file' => __DIR__ . '/.auto-sync-check',

'auto_sync_interval' => 5,

'output_style' => 'expanded', // 'expanded' または 'compressed'

];

例えば /var/www/html/public/css と /var/www/html/src/scss のような構成に変えたい場合は、次のように絶対パスで書けます。

'scss_dir' => '/var/www/html/src/scss',

'css_dir' => '/var/www/html/public/css',

セットアップ(scssphpのインストール)

⚠️フル機能版はscssphpライブラリが必要なので、初回のみComposerでインストールしてください⚠️

```bash

composer install

```

Composerが使えないサーバーの場合は、開発用PC等でこのフォルダごと composer install を実行し、生成された vendor フォルダごとサーバーへアップロードすればOKです(サーバー側でComposerを実行する必要はありません)。

※ どうしてもComposerを使いたくない・vendorフォルダも用意できない場合は

includes/SimpleScssCompiler.php

という自作の軽量パーサー(外部依存なし、変数+ネストのみ対応)も同梱してあります。その場合は includes/SyncManager.php内の ScssCompiler を SimpleScssCompiler に差し替えてください。

ディレクトリ構成

scss-css-sync/

├── config.php ★パスの一元管理ファイル

├── composer.json

├── vendor/ (composer install で生成される)

├── assets/

│ ├── scss/ SCSS原本(config.phpのscss_dirで指定)

│ └── css/ コンパイル結果(config.phpのcss_dirで指定)

├── api/

│ └── sync.php ブラウザ/cronから叩ける同期エンドポイント

├── includes/

│ ├── ScssCompiler.php SCSS→CSS変換(scssphpラッパー、フル機能)

│ ├── SimpleScssCompiler.php 同(自作軽量版、Composer不要のフォールバック用)

│ ├── CssToScssSync.php CSS→SCSS書き戻し

│ └── SyncManager.php mtime比較で自動振り分け

├── autoload.php vendor/autoload.phpがあれば使用、無ければ簡易版にフォールバック

├── auto-sync.php HTMLページの先頭にrequireするだけで自動同期

├── compile.php SCSS強制コンパイル用CLI

├── sync.php 双方向同期を1回実行するCLI

└── watch.php 監視デーモン(CLI)

⚠️vendor/ フォルダは入っていません！「composer install」で作る必要があります！！！⚠️

出力スタイルの変更

config.php の output_style を 'compressed' にすると圧縮出力になります。

⚠️CSS→SCSS書き戻しの制約について(重要)

SCSSはCSSの上位互換の言語なので、コンパイル後のCSSには変数・mixin・ネストなどのSCSS固有情報は残りません。そのため「CSSを編集すれば元のSCSSの構造(変数名など)を完全に復元する」ことは原理的に不可能です。

このシステムでは次のように動作します:

- 対応するSCSSファイルに 「変数・mixin・@include・ネスト(`&`)・補間(`#{}`)」などSCSS固有の記法が「使われていない場合」 → CSSの変更をそのまま整形してSCSSに書き戻します(安全に同期可能)。

- SCSS固有の記法が「使われている場合」 → 誤って変数定義やmixinを壊さないよう、自動上書きはせず「スキップしました」とログに出すだけにとどめます。この場合は手動でSCSS側に変更を反映してください。

ライセンス

商用利用：許可（利益を得る目的での使用も可） 改変・加工：許可（自由に編集して構いません） 再配布・転売の禁止：本データおよび、本データを軽微な修正・変更（※全体の改変度が不十分で、実質的に元データと同等と見なされる場合を含む）したものを、そのまま、または素材として第三者に再配布・譲渡・販売することは禁止します。改変にあたっては、元の価値とは異なる独自の創作性が十分に加わっている必要があります

注意事項

⚠️ソフトウェア使用による損害など、一切責任を負いません。

⚠️サポートなどもありません。PHPやサーバーの知識が多少ある方向けです。

⚠️AIを使用して作りました。