SCSS Plugin

[mvlcek]

SCSS plugin:

This plugin helps you to use SCSS to write your style sheets instead of CSS.
(see http://leafo.net/scssphp/ for information on the compiler and here for the syntax of SCSS)
The performance impact is minimal, as CSS files are generated when first needed and afterwards served directly to the site user.

Just write a SCSS file (e.g. background.scss here with a parameter color) in your template directory:

Code:

body { background-color: param(color); }

Of course your file will probably be longer and use each parameter multiple times.

Then you can use this file within your template:

• Either your SCSS file is recompiled every time it or the parameters change, which makes sense, if you want to keep your CSS file untouched and just set the variables in your template file (or from some other site-wide setting):
  

Code:

<link rel="stylesheet" type="text/css" href="<?php get_scss_css('background.scss', array('color'=>'green')); ?>" />

• Or you want to set the parameters depending on the page (or time of date, etc.), thus using multiple CSS files generated from one SCSS file at the same time. The following example shows, how to set the background color based on a custom field color in the page (white as default, note the last parameter true):
  

Code:

<link rel="stylesheet" type="text/css" href="<?php get_scss_css('background.scss', array('color'=>return_custom_field('color', 'white')), true); ?>" />

API:

Code:

function return_scss_css($themeRelativeScssFile, $params=null, $multipleCSS=false)

Compiles a SCSS file to a CSS file, if the SCSS file is newer or the parameters have changed ($multipleCSS = false).
Compiles a SCSS file to a parameter specific CSS file, if the SCSS file is newer ($multipleCSS = true).
The first parameter is the name of the SCSS file, e.g. "default.scss" (if it's directly in the theme directory) or "css/default.scss".
The second parameter is an associative array with the parameters for the SCSS file and the last parameter must be true, if for each parameter set a new CSS file should be compiled and all these CSS files should be available at the same time.
Returns the full URL of the generated CSS file.

Code:

function get_scss_css($themeRelativeScssFile, $params=null, $multipleCSS=false) {

The same as above but outputs the CSS file URL.

For yet another CSS like syntax see the Less plugin.

[Oleg06]

great plugin, thanks, works fine

[ryunp]

I will be looking into this very soon, great idea! Your work is very much appreciated, mvlcek. Just recently saturating my brain with all the different workflow technology, and it's quite vast (and incredible!).

Something to keep in mind:

scssphp implements SCSS (3.2.12). It does not implement the SASS syntax, only the SCSS syntax.

[pavel9]

Beautiful! I updated scssphp to 0.0.12 and it works fine. It would be difficult to implement the compression option? (scss_formatter, scss_formatter_nested: default, scss_formatter_compressed)

[tuxy]

Hello,

I try to understand how to implement this.

I make a custom.scss and a custom.css

I put the two files in my_theme/css/

Then put this line in the header:

<link rel="stylesheet" type="text/css" href="<?php get_scss_css('/css/custom.scss'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php return_scss_css('/css/custom.css'); ?>" />

Is this right? Or what do I wrong???

IS there a good step-by-step tutorial howto implement?

I'm started with SASS in the past few days.

Christophe

[shawn_a]

I think you only need get_ function , return_ would be if you wanted the file as a string to manipulate.

[mvlcek]

Hello,

I try to understand how to implement this.

I make a custom.scss and a custom.css

I put the two files in my_theme/css/

Then put this line in the header:

<link rel="stylesheet" type="text/css" href="<?php get_scss_css('/css/custom.scss'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php return_scss_css('/css/custom.css'); ?>" />

Why would you need both a scss and a css?
get_scss_css will create a custom.css by compiling the custom.scss, if the custom scss is newer than the custom.css and return the css filename. Thus it will either overwrite your custom.css or do nothing - both undesirable.

If you really need a scss and a css, you must name both differently. The code would be like this:

Code:

<link rel="stylesheet" type="text/css" href="<?php get_scss_css('/css/custom.scss'); ?>" />
<link rel="stylesheet" type="text/css" href="/css/my-static-custom.css" />

[tuxy]

Hi,

Thank you for this useful answer.
I don't need both files, but now I understand how implement a scss-file.

Grtz,
Christophe

[cvrglj]

Like for Less plugin I add in scss.php line 56

Code:

$scssc->setFormatter('scss_formatter_compressed');

to compress output css!

[Oleg06]

Hi Martin, I decided to try your plugin in conjunction with the plugin GS Custom Settings.
I use it to select the radio button.
Template code looks like.

Code:

<link rel="stylesheet" type="text/css" href="<?php get_scss_css('font.scss', array(
'use_font_text'=>return_setting('site','use_font_text'),
'font_weight'=>return_setting('site','font_weight'),
'use_font_heading'=>return_setting('site','use_font_heading'),
'font_weight_heading'=>return_setting('site','font_weight_heading')
), true); ?>" />

font.scss code looks like.

Code:

body {
    font-family: param(use_font_text), Arial, Helvetica, sans-serif;
    font-weight: param(font_weight);
}
h1, h2, h3, h4, h5 {
    font-family: param(use_font_heading), Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: param(font_weight_heading);
}
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 {
    font-family: param(use_font_heading), Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: param(font_weight_heading);
}

Code generated file css looks.

Code:

body {
  font-family: 1, Arial, Helvetica, sans-serif;
  font-weight: 1;
}

h1, h2, h3, h4, h5 {
  font-family: 0, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: 1;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 {
  font-family: 0, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: 1;
}

If I change the code on this

Code:

<link rel="stylesheet" type="text/css" href="<?php get_scss_css('font.scss', array(
'use_font_text'=>get_setting('site','use_font_text'),
'font_weight'=>get_setting('site','font_weight'),
'use_font_heading'=>get_setting('site','use_font_heading'),
'font_weight_heading'=>get_setting('site','font_weight_heading')
), true); ?>" />

, the link to the file looks like this

Code:

<link rel="stylesheet" type="text/css" href="Roboto400Open Sans Condensed700http://uikit.aa/theme/UIKit/font7a6b92474c53ea8d208a871e95603fae.css">

What to do?

[Knobbles]

Since PHP 8.2, this plugin throws a lot of deprecation warnings, as dynamic properties for classes are deprecated now.
The file scss/scss.inc.php uses adding dynamic properties heavily.

But there is a way to get rid of them: if the class has an attribute "AllowDynamicProperties" then PHP is still fine with it!

So you have to add the attribute to the classes that are inside scss.inc.php.
This can be done with prepending the line
#[AllowDynamicProperties]
immediately before each class declaration.

So we can do the following:

Line 47:

PHP Code:

#[AllowDynamicProperties]
class scssc { 


Line 2546:

PHP Code:

#[AllowDynamicProperties]
class scss_parser { 


Line 4035:

PHP Code:

#[AllowDynamicProperties]
class scss_formatter { 


And these deprecation warnings are gone.

Moreover, the PHP community invented also a new string interpolation problem, as using ${var} in strings is also deprecated, you must use {$var} instead now.
So you can seach the file scss.inc.php for "${" inside strings, replacing them with "{$".
There are 7 occurences of these.