Announcing Sassify

Rudy · September 21, 2016

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 · September 21, 2016

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 · September 22, 2016

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 · September 22, 2016

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 · September 22, 2016

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 · September 23, 2016

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 · December 14, 2016

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 · February 14, 2017

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

RichyRich · August 28, 2017

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 · August 28, 2017

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 · August 28, 2017

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 · August 28, 2017

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 · August 28, 2017

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 · August 28, 2017

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 · August 30, 2017

@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 · November 22, 2017

Does Sassify support .sass files?

Roberts R · December 4, 2018

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 · December 10, 2018

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

Rodd · December 23, 2020

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!

Sign In

Announcing Sassify

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content