Jump to content

Announcing Sassify


Rudy
 Share

Recommended Posts

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/

  • Like 17
Link to comment
Share on other sites

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/

 

Link to comment
Share on other sites

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"

  • Like 3
Link to comment
Share on other sites

  • 2 months later...

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! 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...
  • 6 months later...

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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...

  • Like 3
Link to comment
Share on other sites

  • 2 months later...
  • 1 year later...
  • 2 years later...

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...