使用SCSSPHP将主题定制器值编译为.SCSS文件,以便编译为CSS

时间:2015-06-08 作者:Henshall

我一直无法自动编译。将scss文件转换为我的主要WordPress样式。css文件。

我正在使用Leafo的SCSSPHP脚本,并试图实现一些功能。

我在用Kirki(http://kirki.org/) 覆盖WordPress主题定制器,这就是我要做的。在主题定制器中创建我的面板/部分/设置,如字体大小/谷歌字体转换器/背景颜色等。。。当主题定制器中的值更改时,它会更新。scss文件,该文件将自动编译以显示用户所做的更改。我试图避免内联我的CSS,请不要激动,因为像X主题这样的主题会这样做,Redux框架也会这样做。

如何将主题定制器中的变量包含到中。scss文件,如果它有助于im使用包含sass的\\u主题。我不确定是否需要创建一种样式。主题根级别的php文件或使我的。将scss文件转换为mixin。scss。php?,此外,我必须将其放置在何处,以便将其排队。

时尚的。php位于主题的根目录下:

<?php

header( \'Content-type: text/css\' );

require dirname( __FILE__ ) . "/framework/scss/wp-scss/scssphp/scss.inc.php";

$scss = new scssc();
$scss->setImportPaths( "framework/scss/" );
$scss->setFormatter( "scss_formatter_compressed" );

echo $scss->compile( \'@import "style.scss"\' );
这是我的风格。css文件:

@import url("/framework/scss/style.scss");
然后,我包括风格。php/样式。SCS如下:

wp_enqueue_style( \'theme-style\', get_stylesheet_directory_uri() . \'/style.php/style.scss\' );
这将编译我的风格。scss和使用静态值调整我需要做的事情,我试图避免使用静态值,并使用主题定制器中的变量更新文件。

如果您需要更多信息,请告诉我,

非常感谢您的帮助

谢谢

2 个回复
SO网友:adambock

我想实现同样的目标。。我最终做的是创建一个收集Kirki变量的函数(参见here 关于Kirki中变量的使用),并将其写入SCS。。

$file = get_template_directory() . \'/sass/custom/_custom_vars_mixins_options.scss\';

if(file_exists($file)){

    $output = "";

    $variables = Kirki::get_variables();
    foreach ( $variables as $variable => $vvalue ) {
        $output .= \'$\' . $variable . \': \' . $vvalue . \';\' . PHP_EOL;
        //echo \'@\' . $variable . \':\' . $value . \';\';
    }

    file_put_contents($file, $output, FILE_TEXT )or die(\'<br />Error writing to custom options CSS file\');
每次用户通过清理回调将其设置保存在WP Customizer中时,都会调用此函数,从而将所有自定义用户设置写入。scss文件。

SO网友:Aristeides

我目前正在尝试在Kirki中添加对预处理器的支持。您可以在此处找到有关如何使用的说明:https://github.com/reduxframework/kirki/wiki/variables请注意,以上仅适用于github版本的插件,因为它不稳定,仍在开发中。

如果您只想在<head> 还有其他的方法。。。退房http://aristeides.com/blog/avoid-dynamic-css-in-head/

结束

相关推荐

在替换index.php时未加载特定于AJAX的模板

在我之前的帖子之后(Full-Ajax Theme: parseJSON error while building a JSON object from a Wordpress custom template) 关于JSON(现已解决)的一些问题,我正在尝试在进行AJAX调用时加载一些替代模板。如果您不想阅读上一篇文章,请使用简短版本:在特定的.ajax-link, 通过标头发送请求,其中包含$.ajax({ url : url, ty