More than 3 years have passed since last update.

PHPでsassを使うには

Last updated at 2020-12-16Posted at 2020-12-16

SCSSからCSSを生成するために必要なSCSSコンパイラをPHPで実行できるライブラリがphp-sassです。
##php-sassをインストール
composerでライブラリをインストールします。

ターミナル

composer require panique/php-sass

##PHPファイルへの記述
PHPファイルを用意します。

index.php

<?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">
        <h1 class="title">Hello php-sass</p>
    </div>
</body>
</html>

PHPファイルでSassCompiler::run()メソッドを呼び出して、SCSSの入力先とCSSの出力先を指定します。

##SCSSファイルへの記述
SCSSファイルを用意します。

base.scss

// 変数
$font-color: #333333;
$bg-color: #CCCCCC;
$font-size-default: 16px;

body {
  color: $font-color;
  background: $bg-color;
}

style.scss

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

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

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

// ネスト
.main {
  h1 {
    // 継承
    @extend %text;
    margin-top: 80px;
  }
}

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

##SCSSファイルからCSSファイルへコンパイル
SCSSファイルを編集し保存すればコンパイルがされ、cssフォルダの中にstyle.cssができます。

style.css

body {
  color: #333333;
  background-color: #CCCCCC;
}
.main h1 {
  /* コメント（コンパイル後も残る） */
  font-size: 32px;
  text-align: center;
}
.main p {
  margin-top: 80px;
}
.title {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

ディレクト構成は以下のようになります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up