README

在模板中编译 SCSS 到 CSS

要求

此插件需要 Craft CMS 4.0.0 或更高版本。

安装

要安装此插件，请按照以下说明操作。

打开终端并转到您的 Craft 项目目录
```
cd /path/to/project
```
然后告诉 Composer 加载插件
```
composer require chasegiunta/scss
```
在控制面板中，转到设置 → 插件，并点击 SCSS 的“安装”按钮。

SCSS 概述

Craft 便捷地提供了 {% css %} 标签，用于在页面 head 中包含特定于模板的样式。此插件通过启用对使用 scssphp 库 (https://github.com/scssphp/scssphp) 编译 SCSS 到 CSS 的支持，进一步扩展了该功能。

配置 SCSS

默认情况下，当启用 devMode 时，生成的样式将以可读的 expanded 格式输出。如果 Craft 不在 devMode 下运行，样式将被压缩为 compressed 格式。

您可以通过从插件目录中的 config 文件夹复制 scss.php 文件来配置这些默认输出格式。

使用 SCSS

{% scss %}
... insert scss here ...
{% endscss %}

假设以下 SCSS

{% scss %}
/*! Comment */
.navigation {
    ul {
        line-height: 20px;
        color: blue;
        a {
            color: red;
        }
    }
}

.footer {
    .copyright {
        color: silver;
    }
}
{% endscss %}

输出格式

指定输出格式将优先于 config/scss.php 中的任何默认设置。

{% scss expanded %}

/*! Comment */
.navigation ul {
  line-height: 20px;
  color: blue;
}
.navigation ul a {
  color: red;
}
.footer .copyright {
  color: silver;
}

{% scss compressed %}

/* Comment*/.navigation ul{line-height:20px;color:blue;}.navigation ul a{color:red;}.footer .copyright{color:silver;}

@import

当您使用 @import 指令导入文件时，当前 Craft 安装的路径用作搜索路径。

由 Chase Giunta 提供

chasegiunta / scss

维护者

详情