Announcing Sassify

[Rudy]

Hi all,

I am new to ProcessWire module development. Just recently getting back to using PW again after a couple of years away from it. 

I was looking for a SASS/SCSS/Compass pre-processor module for PW and couldn't find any. The closest I could find was AllInOneMinify but it doesn't do SASS/SCSS.

I decided to make this module (with heavy inspiration from AOIM). This is a pretty basic module that takes one or more sass/scss/compass file(s) and compile them automatically in your template.

Github link

https://github.com/lesaff/ProcessWire-Sassify

I really appreciate any comments, suggestions, bug fixes, etc. Hopefully this is the first of many modules.

Thanks

Rudy

Note: Added to Modules directory, under http://modules.processwire.com/modules/sassify/

[Pete]

Awesome Rudy - I was hoping someone would make something like this a few months ago and now here it is

Please feel free to add it to the modules directory (mark it as Beta if you want to make people aware there may be bugs): http://modules.processwire.com/

[szabesz]

Thaks a lot @Rudy! I've been reluctant to rely too much on SCSS preprocessors, setting up JS based preprocessors is a real PITA for me. I will surely check out your module, scssphp is something that makes mew more comfortable in utilizing SCSS.

Note, that I especially like the short description in the comment here:
https://github.com/lesaff/ProcessWire-Sassify/blob/master/lib/sass-compiler.php

Spoiler

 * This simple tool compiles all .scss files in folder A to .css files (with exactly the same name) into folder B.
 * Everything happens right when you run your app, on-the-fly, in pure PHP. No Ruby needed, no configuration needed.
 *
 * SassWatcher is not a standalone compiler, it's just a little method that uses the excellent scssphp compiler written
 * by Leaf Corcoran (https://twitter.com/moonscript), which can be found here: http://leafo.net/scssphp/ and adds
 * automatic compiling to it.
 *
 * The currently supported version of SCSS syntax is 3.2.12, which is the latest one.
 * To avoid confusion: SASS is the name of the language itself, and also the "name" of the "first" version of the
 * syntax (which was quite different than CSS). Then SASS's syntax was changed to "SCSS", which is more like CSS, but
 * with awesome additional possibilities and features.
 *
 * The compiler uses the SCSS syntax, which is recommended and mostly used. The old SASS syntax is not supported.
 *
 * @see SASS Wikipedia: http://en.wikipedia.org/wiki/Sass_(stylesheet_language)
 * @see SASS Homepage: http://sass-lang.com/
 * @see scssphp, the used compiler (in PHP): http://leafo.net/scssphp/

 

[Robin S]

Definitely a useful module, thanks @Rudy!

A couple of things...

When using a single SCSS file I get a PHP warning notice:

Quote

PHP Warning: Invalid argument supplied for foreach() in ...\FileCompiler\site\modules\Sassify\Sassify.module:89

 

And it would be good if the module only recompiled the CSS if one of the source SCSS files changes rather than recompiling on every page load. A while ago I wrote a simple function for compiling SCSS to CSS using ScssPhp, only when needed. Perhaps you might find something useful in there:

require_once TEMPLATES . '/stylesheets/scssphp/scss.inc.php';
use Leafo\ScssPhp\Compiler;
function compileCSS(){

	// get timestamp of most recently modified SCSS file
	$files = glob( TEMPLATES . 'stylesheets/scss/*.scss' );
	$times = array_map('filemtime', $files);
	arsort($times);
	$scss_time = current($times);

	// get timestamp of CSS file
	$css_file = TEMPLATES . 'stylesheets/site.css';
	if (file_exists($css_file)) {
		$css_time = filemtime($css_file);
	}

	// if no CSS file or SCSS newer than CSS file...
	if( !isset($css_time) || $scss_time > $css_time ) {

		// ...compile a new CSS file...
		$scss = new Compiler();
		$scss->setFormatter('Leafo\ScssPhp\Formatter\Compressed');
		$scss->addImportPath( TEMPLATES . '/stylesheets/scss/' );
		$scssIn = file_get_contents( TEMPLATES . '/stylesheets/scss/site.scss' );
		$cssOut = $scss->compile($scssIn);
		file_put_contents( TEMPLATES . '/stylesheets/site.css', $cssOut );

		// ...and return the path with the SCSS timestamp...
		return '/site/templates/stylesheets/site.' . $scss_time . '.css';
	} else {
		// ...else return the path with the existing CSS timestamp
		return '/site/templates/stylesheets/site.' . $css_time . '.css';
	}

}

FYI...
"TEMPLATES" is a constant I defined elsewhere that holds the path to the PW templates folder.
I use a single SCSS file "site.scss" that imports the other SCSS files.
The compiled file is saved as "site.css", but for cachebusting purposes I include the modified time as part of the file basename in the returned URL, then use a rewrite rule in htaccess to resolve the URL to the actual filename. An alternative would be to append a query string with the file modified time, e.g. "site.css?1472438137"

[Rudy]

Thanks @Robin S for your comments/suggestions. I will try to incorporate them in the next version. I think adding a checkbox for cache bust is very useful.

Rudy

[csaeum]

Can be coupled with AIOM (http://modules.processwire.com/modules/all-in-one-minify/) that too.

So that after compile directly the data is passed to AIOM and then reduced or be summarized.

[StanLindsey]

I've just submitted a pull request to you Rudy, based on Robin's code, to add the ability to compile all updated sass files. You then include your style sheets as you normally would, pointing to the generated .css file.

You can now either use the SassifyAll() function anywhere or head to the admin and click 'compile sass' to compile all your assets at once. 

This is my first input to a Processwire Module so let me know if I've done anything wrong, or if I've stepped on anybody's toes! 

[mountbatt]

Hey Stan, where can I find your changes? Would like to use this compiler only if the files changed. Thanks a lot!

[RichyRich]

Quote

Parse Error: syntax error, unexpected '[' (line 36 of ........../site/modules/Sassify/Sassify.module)

Just installed now get this error on the back end. I am guessing PHP version related?

[Mike Rockett]

3 hours ago, RichyRich said:

Just installed now get this error on the back end. I am guessing PHP version related?

Yes, that means you're on PHP < 5.4. Highly recommended to upgrade to 5.6 at the very least.

[adrian]

If you can't upgrade your PHP version you could simply replace:

public static function getModuleInfo()
{
    return [
        'title'    => "Sassify",
        'version'  => "0.0.5",
        'summary'  => "Compile SASS/SCSS/Compass and use it in your project.",
        'author'   => "Rudy Affandi",
        'href'     => "https://github.com/lesaff/ProcessWire-Sassify",
        'icon'     => "css3",

        // use autoload if module is to be called each load, if it is only needed to setup something set to false
        'autoload' => true,
        'singular' => true,
        'page' => [
            'name' => 'sassify',
            'parent' => 'setup',
            'title' => 'Sassify Settings',
        ],
        'requires' => "ProcessWire>=2.5",
    ];
}

with:

public static function getModuleInfo()
{
    return array(
        'title'    => "Sassify",
        'version'  => "0.0.5",
        'summary'  => "Compile SASS/SCSS/Compass and use it in your project.",
        'author'   => "Rudy Affandi",
        'href'     => "https://github.com/lesaff/ProcessWire-Sassify",
        'icon'     => "css3",

        // use autoload if module is to be called each load, if it is only needed to setup something set to false
        'autoload' => true,
        'singular' => true,
        'page' => array(
            'name' => 'sassify',
            'parent' => 'setup',
            'title' => 'Sassify Settings',
        ),
        'requires' => "ProcessWire>=2.5",
    );
}

Note that PW only requires PHP 5.3.8, so in general modules should be written to use the syntax supported by that version.

[Mike Rockett]

43 minutes ago, adrian said:

If you can't upgrade your PHP version you could simply replace:

[1] with: [2]

Note that PW only requires PHP 5.3.8, so in general modules should be written to use the syntax supported by that version.

There are other files that use the new array syntax, so those would need to be changed too. Considering that changes would need to be made to vendor libs as well, the best bet would be to get onto a newer version of PHP.

[adrian]

4 minutes ago, Mike Rockett said:

There are other files that use the new array syntax, so those would need to be changed too. Considering that changes would need to be made to vendor libs as well, the best bet would be to get onto a newer version of PHP.

My apologies - yes, I see that those vendor libs are also PHP 5.4+ (https://github.com/lesaff/ProcessWire-Sassify/blob/edbbc4dad1a2a38e64a084638cf69aa9c663abe4/vendor/leafo/scssphp/scss.inc.php#L3) 

I might really be time for PW to dump support for 5.3. Just looking around, Drupal stopped supporting it 3 years ago!

[Mike Rockett]

25 minutes ago, adrian said:

I might really be time for PW to dump support for 5.3. Just looking around, Drupal stopped supporting it 3 years ago!

Agreed. I'm still convinced that PW should be PHP 5.6+ as everything before that it unsupported (all support for previous versions ended over a year ago). At the very earliest, I think the limit should be 5.5.

Edit: I actually think Teppo should run a weekly.pw poll on this...

[StanLindsey]

@mountbatt - You can go into the module's options and run the compile manually.

I've since switched to an NPM based build system; watching and compiling scss, autoprefixing and minifying it.

[uiui]

Does Sassify support .sass files?

[Roberts R]

To use this with php7.2 you have to change

list($unit, ) = each($units); 

$unit = key($units)

in Number.php line 293. As "each" function is now DEPRECATED

 

[joshua]

I updated some dependencies and bugs (e.g. the php 7.2 bug with each() ) in this push request.

[Rodd]

Hi everybody!

I have an issue with Sassify. When I want to compile my .scss file in .css, I only have an import of the .scss file into the .css file. But before the SASS was really compiled in CSS, and I don't understand what happened in the meantime.

Can someone help me to resolve or understand this?

Thanks by advance!