要在PHP中使用Sass的话

1 年 ago

逸, 科

1 minute

要在PHP中执行SCSS编译器以生成CSS的库是php-sass。安装php-sass库使用composer。

composer require panique/php-sass

准备一个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 文件。

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

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

@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ができます。

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);
}

#技术文章