README

SCSS是一个抽象层，它为CSS添加了一些非常强大的功能。它将加快您的开发过程，使您的生活更加轻松。从以下链接了解更多信息，然后返回。

WP-SCSS是一个为主题创作者提供的插件，允许您使用SCSS构建站点，并使用来自自定义设置器的实时更新的变量。它还允许您传递数组，并将它们转换为SCSS映射。

安装

WP-SCSS通过composer安装。

只需将以下行添加到您的composer.json文件的require部分："trampoline-digital/wp-scss": "dev-master"

或者

composer require trampoline-digital/wp-scss如果您不想冒险使用夜间构建。然后运行composer update;

在您的functions.php文件顶部，添加以下行：require_once(__DIR__ . '/vendor/trampoline-digital/wp-scss/wp-scss.php' );

现在您已经准备好使用WP-SCSS了

使用方法

要加载一个SCSS文件，只需像加载任何正常的样式表一样排队即可。

`wp_enqueue_style('scss_styles', get_template_directory_uri() . '/assets/scss/scss_styles.scss');`

您不需要在header.php中链接到主样式表。只需确保在文档头中调用wp_head()即可。

支持所有标准SCSS功能以及文件中任何位置的@import规则。

调试将define('WP_DEBUG', true);设置为将强制WP-SCSS在每次页面重新加载时重新编译。

从PHP传递变量

您可以使用scss_vars钩子或将PHP接口部分中定义的函数传递变量到您的.scss文件中。

以下是如何添加单个变量的示例。

add_filter( 'scss_vars', 'scss_color', 10, 2 );
    // $handle is a reference to the handle used with wp_enqueue_style() - don't take it out
    function scss_color( $vars, $handle ) {
    $vars["blue"] = "lightblue";
    return $vars;
}

以下是如何使用Kirki自定义设置器添加单个变量的数组示例。

add_filter( 'scss_vars', 'scss_colors', 10, 2 );
// $handle is a reference to the handle used with wp_enqueue_style() - don't take it out
function scss_colors( $vars, $handle ) {
    $defaults = new CustomizerDefaults();
    $colors = $defaults->get_colors();
    foreach ($defaults->get_colors() as $color){
        $slug = $color['slug'];
        $vars[$slug] = get_theme_mod($slug, $colors[$slug]['value']);
    }
    return $vars;
}

如果您想使用SCSS映射，只需以以下格式传递数组

add_filter( 'scss_vars', 'scss_map', 10, 2 );
 // $handle is a reference to the handle used with wp_enqueue_style() - don't take it out
function scss_color( $vars, $handle ) {
    $vars["array_of_colors"] = array(
        "blue" = "darkblue",
        "gray" = "lightgray" 
    );
    return $vars;
}

您可以使用以下方式访问SCSS中的值

.heading{
    color: map-get(array_of_colors, blue); // Will return the value of 'blue' ('darkblue')
    background-color: map-get(array_of_colors, gray); // Will return the value of 'gray' ('darkgray')
    
}

默认变量

您可以使用以下默认变量，而不用担心上述代码

$theme-url是当前主题目录的URL

使用它非常重要，因为您不能使用相对路径 - 编译后的CSS存储在上传文件夹中，这是在WordPress安装中您可以保证能够写入的唯一位置。因此，相对URL会中断。

待办事项

测试添加SCSS函数
编写单元测试
进行一些紧张的QA

进一步阅读

在此处阅读DCDD.js文档.

在此处阅读针对PHP解析器的文档：http://leafo.github.io/scssphp/。

贡献者

此项目是Robert O'Rourke的WP-LESS的复活（从复制开始）。

不用说，没有Robert O'Rourke的辛勤工作，这个项目是不可能实现的。

此外，也要感谢那些贡献和讨论帮助构建原始WP-LESS插件的贡献者。

许可

本软件根据MIT许可证许可。

trampoline-digital / wp-scss

维护者

详细信息