Combining SCSS and PHP

  • Some time ago I started working with SASS (scss) and soon after that I started using an ‘external’ _config.scss file in which I declare all default variables which are being used in the rest of the stylesheets. That way I have only one place to deal with changes of color. margins etc.
    Example:

    // colors
$primary-color: #00baf1;
$secondary-color: #f9a533;
$white: #ffffff;
$black: #000000;

// Calculate alternative colors
$primary-color-alt: lighten($primary-color, 15%);
$secondary-color-alt: lighten($secondary-color, 15%);

// Calculate grey shades
$lightgrey: mix($white, $black, 80%);
$grey: mix($white, $black, 50%);
$darkgrey: mix($white, $black, 20%);

// Layout
$default-margin: 20px;

    Etc.
    This works great for me.

    However…

    I’m also often using the WP customizer API (WP_Customize_Control)
    And there I also make use of default settings. These can be declared in the functions file. So I have some defaults in _config.scss and other defaults in customizer_functions.php.

    What I’m looking for is a way to connect these two. So that I have one place where both defaults are being managed. And that, as an example, I could change the default border color once. And that the stylesheets, as well as the WP Customizer us that one value as their default.

    The only thing I could think of was creating a default ‘style_defaults.php’ file (with header “Content-type: text/css”) in which I do the magic. So I can easily include / import it in other PHP or CSS files.

    This works as long as I’m using plain CSS. But SASS throws errors when I do something like:

    $primary-color = '#00baf1';
echo '$primary-color: ' . $primary-color; // in order to parse scss: $primary-color: #00baf1;

    So this won’t help me when using SCSS.

    I’m not only looking for tips on how to achieve this, but I’m also interested in any other thoughts, like why this may be a bad idea to do, or other ways to achieve the same thing.

    • This topic was modified 7 years, 5 months ago by Gooly.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    It’s conceivable to write PHP code to parse through your SCSS file to extract specific variable assignments for use in the customizer, then write any alterations back to the file. This sort of scheme is inherently weak though, the code and file need to be tightly integrated, variances are not well tolerated.

    It would be better for PHP to maintain the values in the DB, then write them out dynamically as a SCSS file. Similar to the code you tried that threw SASS errors. As you implemented it it threw errors, but by managing file MIME types in headers sent, it should be possible to make a dynamic, PHP based SCSS file work. This strikes me as rather backwards though. You are writing out a file so it can be parsed by SASS into CSS. Why not directly output the CSS and bypass SASS?

    The real problem is the desire to maintain data in two different places. This is never a good idea. Keeping such data synchronized is also inherently weak, maybe even weaker than parsing text files. I think the best solution would be to maintain customizer CSS settings in the DB like they are supposed to be, then directly, dynamically output CSS based on these values with PHP. You are essentially using PHP as a scripting language instead of SASS. The end result is the same. The input is very different, but whatever advantages there are in SASS can be implemented in PHP. The problem here is unlike SCSS, the PHP approach is not standardized. Only those well versed in both CSS and PHP will be able to make sense out of what you are doing.

    The PHP output as dynamic CSS can be in two parts. Inline style in the head section for above the fold styling, and all other CSS in a dynamically generated external file fetched in the footer to optimize the initial page load and display. As mentioned, PHP files can appear as CSS or SCSS text files by outputting the proper MIME type header.

    No doubt you are reluctant to abandon SCSS. I don’t blame you. I can’t think of any advantage offered by SCSS that couldn’t be implemented with PHP except for the standardized, clean, accessible structure. That’s certainly an important aspect, but you cannot really use SASS in the customizer, you can with PHP.

    Thread Starter Gooly

    (@gooly)

    Thanks bcworkz.
    Your reply makes a lot of sense. This is the reply I hoped for ++
    It opens a new approach for me which I’m going to dive into. I either come back with some questions, or with the response that everythings works fine ??
    Thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Combining SCSS and PHP’ is closed to new replies.