php-sassでSCSSをコンパイル

2020年3月18日

SCSS（SASS）はスタイルシートを書くことができるCSSメタ言語です。
SCSSを使うことでCSSをより効率的で可読性の高い記述にできます。

SCSSからCSSを生成するためにはSCSSコンパイラにかける必要があるのですが、これをPHPで実行できるライブラリがphp-sassです。

GitHub

panique/php-sass

https://github.com/panique/php-sass

Compiles SASS to CSS automatically with pure PHP. No ruby used. One line of code. Currently uses latest SCSS 3.2 syntax, imports and mixins. Compass can also be used. - panique/php-sass

composerでインストールします。

composer require panique/php-sass

PHPファイルとSCSSファイルを用意します。

<?php
require 'vendor/autoload.php';

if($_SERVER['SERVER_NAME'] == 'localhost') {
    SassCompiler::run("scss/", "css/");
}
?>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="main">
        <p class="rotate">hello php-sass</p>
    </div>
</body>
</html>

PHPはSassCompiler::run()メソッドを呼び出して、SCSSの入力先とCSSの出力先を指定するだけです。

// 変数
$font-stack:    Helvetica, sans-serif;
$color: #fff;
$back-color: #BF4080;

body {
  font: 100% $font-stack;
  color: $color;
  background-color: $back-color;
}

@import "base"; // インポート

// コメント（コンパイル後残らない）

%message { /* コメント（コンパイル後も残る） */
  font-size: 10px * 3;  // オペレーター
  text-align: center;
}

// ネスト
.main {
  p {
    // 継承
    @extend %message;
    margin-top: 100px;
  }
}

// ミックスイン
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.rotate { @include transform(rotate(30deg)); }

SCSSは一通りの構文を試してみます。

フォルダ構成はこんな感じです。

/
├───index.php
├───vendor/
├───scss/
│       style.scss
│       base.scss
└───css/

実行するとCSSが出力されてスタイルが適用されます。

body {
  font: 100% Helvetica, sans-serif;
  color: #fff;
  background-color: #bf4080;
}
.main p {
  /* コメント（コンパイル後も残る） */
  font-size: 30px;
  text-align: center;
}
.main p {
  margin-top: 100px;
}
.rotate {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}