SCSSファイルに、DB上に格納した値を挿入することは出来ますか？

Question

###前提・実現したいこと
CakePHPを勉強し始めたばかりの、Webデザイナーです。

勉強も兼ねて、Webサイト（ランディングページ）を管理画面から生成するCMSを作れないか調べています。
その際、そもそも「css上で動的にDBの値を取得できるのか」という疑問に突き当たりました。

周囲のphpエンジニアに質問したところ、「php上では取得出来るんだから、htmlでCSSを上書きすれば？」
という返答でした。

確かにそうなのですが
「backgroundに画像を挿入したい」
「:before疑似要素でliに画像アイコンを表示したい」
そういったデザイン指定を全てhtml上に書くことに違和感を感じています。

scss上で、データベース上の値を扱うことは出来ないのでしょうか？
もし出来るとすれば、どのようにすれば可能でしょうか？

基礎的な質問で申し訳ありませんが、私の知識レベルで検索しても上手く回答が見つかりませんでした…。
勉強の糸口をアドバイス頂ければと思います。

###要件

管理画面側/ブラウザ側のイメージ

###該当のソースコード

書き出して欲しいソースコード
<!---------------------
   html
---------------------->
<div id="content">
  <h1>新生活応援フェア！-テスト-</h1>
  <section id="sec1">
    <h2>いまだけ10％OFF!</h2>
    <p>新生活応援として、今だけ店内全て10%OFF!このチャンスをお見逃しなく！</p>
  </section>
</div>

/*=====================
   scss
======================*/
#content{
  width:980px;
  margin:0 auto;
  padding:30px;
  background:#94cdd3;
  h1{
    color:#efef1b;
    font-size:21px;
    text-align:center;
  }
}
#sec1{
/*以下省略*/
}

###補足情報
後学の為に「css内で動的に値の取得が出来るのか/出来ないのか」知りたいと思っております。
こちらの要件・ソースは、あくまでサンプルとして参考にして頂ければ幸いです。
※普通にランディングページを作るだけならば、勿論コーディングした方が早いです。
※そもそもこの仕様は使いにくい。

以上、お力添えの程宜しくお願い致します。

Answer 1

scss上で、データベース上の値を扱うことは出来ないのでしょうか？
もし出来るとすれば、どのようにすれば可能でしょうか？

「SCSSをコンパイルしてCSSを生成するときに、データベースから取得したデータを挿入したい。」ということでしょうか？

そのようなことはせずに、CakePHPでデータベースから取得したデータを使って、CSSやHTMLを生成すればいいと思います。
別途CSSを生成するアクション（メソッド）を用意して、そのURLを読み込むだけなので、CSSをHTMLに上に書くこともありません。
CSSやHTMLを生成するときも、テンプレートを用意しておけば、クライアントが入力した値をそのテンプレートに入れるだけです。

動的なプレビューが必要な場合も、JavaScriptでCSSを追加・削除しても一時的なものなので、気にする必要はありません。

例

以下の内容を書いて、そのCSSを読み込みたいページで<link rel="stylesheet" href="http://example.com/hoges/style"/>を書くとCSSが読み込まれます。

// コントローラー
// src/Controller/HogesController.php
public function style()
{
    // レイアウトの設定（CakePHP3でもバージョンによって書き方が変わる）
    // src/Template/Layoutの.ctpファイルを選択
    // デフォルトは"default"
    $this->viewBuilder()->setLayout('css');
    $this->viewBuilder()->layout('css'); // 3.4 以前
    $this->layout = 'css'; // 3.1 以前

    // CSS用にヘッダーを設定
    $this->response->header('Content-Type', 'text/css');

    // ビュー（style.ctp）に変数$sizeを渡す
    $size = 400;
    $this->set(compact('size'));
}

// ビュー
// src/Template/Hoges/style.ctp
h3 {
	font-size: <?=$size?>%;
}

// src/Template/Layout/css.ctp
// このレイアウトファイルはコントローラーで指定している
// デフォルトはdefault.ctp

@charset "utf-8";

// ここにビューの内容が出力される
<?= $this->fetch('content') ?>

Comments

[marota]

ご回答ありがとうございます！やっぱりscss上でどうにか出来ないか…というのが間違っていたんですね。
分かりやすく説明して頂き、助かりました。
まだMVCの基本が分かっていないので…具体的なデータの受け渡し方を頭に描けていないのですが、まず調べつつ作るところから始めてみます！
ご回答ありがとうございました。

最後に1つだけ教えて頂けると嬉しいのですが…。
CSS生成用のメソッドはControllerに記述する認識で間違いないでしょうか？

[coba-coba]

> CSS生成用のメソッドはControllerに記述する認識で間違いないでしょうか？

その通りです。最初は少し分かりにくいかもしれませんが、すぐに慣れるので大丈夫ですよ。

Bakeでコントローラーやテンプレートなどを自動で出力してから、それに付け加えていくと分かりやすいです。

イメージがわかないと思うので、もう少し具体的なことを上に追記しました。