February 12, 2014
Chris
, , , ,
Comments Off on Extremely easy SASS in Laravel (with pure PHP)

Extremely easy SASS in Laravel (with pure PHP)

Working with SASS is awesome: it reduces your workload dramatically, makes web projects much cleaner, DRYs your code, adds awesome features to CSS (variables, nesting, calculation, automatic prefixes, etc.) and comes with a beautiful near-CSS syntax. SASS is definitly the superpower-version of CSS. But as described in Compile SASS to CSS with pure PHP automatically [article removed due to too much trolling] it’s quite unattractive to get into SASS, simply as it’s mainly a Ruby-driven tool and needs a little bit of command line action.

 

What it SASS ?

Basically, something like this

$color_border: #000;
$color_headline: blue;

.container {
  border: 3px solid $color_border;
  h2 {
    color: $color_headline;
  }
}

will directly compile to this

.container {
  border: 3px solid #000;
}
.container h2 {
  color: blue;
}

Note the variables and the nesting. These two features alone can and will increase the quality of your CSS dramatically, and not to forget the possible improvements in development speed and team-compatibility.

 

What’s SASS, SCSS, LESS and Compass ?

This one is tricky! When SASS was created, the syntax looked different, mainly because there were no brackets. The technology itself was (and is) called SASS. Later, the syntax was optimized, brackets were added etc., and this newer syntax got the name “Sassy CSS” and the file ending .scss. As this syntax has become really popular, most people simply call this “SASS”, even if it is basically “the scss-syntax of SASS”.

LESS is similar to SASS, but was created later and never got really popular. LESS has some nerdy features that look really cool, but are obviously not needed in most projects. Maybe LESS is something like Prototype was for jQuery, a quite advanced, but always #2 tool. Try it if you like.

Compass is a framework for SASS that reduces your SASS code even more by adding stuff automatically, like browser-vendor, or providing ready-to-go code block for common CSS situations. There are others, but Compass is an often-heard word in the SASS context.

Conclusion: It’s just my personal experience, but obviously the .scss syntax of SASS has become the industry’s standard. I’ve never seen the older .sass syntax in a real project. Most tutorials, books etc. also write about .scss, not .sass. I’ve also never seen LESS in action, anywhere. To make everyone’s life easier, it might be useful to only use the .scss syntax of SASS in your projects, unless you have a good reason not to do.

 

The real, official way to use SASS:

First, a little disclaimer: SASS is basically a tool written in Ruby that “watches” folders and instantly compiles them to CSS. This is the official way to use SASS. For really professional workflows, use that way! The tool used in this article is a PHP-implementation of SASS which mainly does exactly the same. But it’s not a 100% perfect copy of the Ruby tool, sure. Keep that in mind. At the point of writing, the PHP-tool comes with the very latest .scss syntax – which is awesome -, but is not able to compile the old-school .sass syntax or .less – which is totally okay, as there’s no reason to use .sass or .less anyway (and if you absolutly need to use .sass or .less, then you really don’t need this PHP-tool).

 

Laravel-sass

To solve the I-don’t-want-to-mess-up-my-project/environment-with-Ruby problem and to get a nice and smooth “pure PHP” workflow here I’ve released laravel-sass, a super-simple PHP script – loaded via Composer – that compiles your SASS stuff to CSS every time you run your application (while in development for sure). It’s extremely simple (one line of code in a default setup), and built on top of the excellent scssphp SASS compiler, a tool that does exactly what Ruby’s SASS compiler does, but it is written in pure PHP. And by the way, it also works with any other modern PHP-framework too, you’ll just have to edit the folder paths.

Laravel-sass is a rewrite of my earlier released php-sass-watcher tool that does mainly the same thing, but not once per application-run: php-sass-watcher needs to be “started” and then it runs forever, compiling your entire SASS files to CSS every X seconds. A little bit weird, but in the beginning I thought this might be the better solution.

For this tutorial we assume you already have Laravel installed and running. See How to install Laravel 4 on Ubuntu 12.04 LTS for more info on that.

 

The installation

Add this to your composer.json, please note that this is a require-dev, not a normal require. This devides real dependencies from ones you only need for local development.

"require-dev": {
    "panique/laravel-sass": "dev-master"
}

Then edit your index.php (in folder “public”) and put this line right before $app->run().

SassCompiler::run("scss/", "css/");
// some people said this does not work in their installation, so if you have trouble, try these paths:
// SassCompiler::run("public/scss/", "public/css/");

The first parameter (okay okay it’s called argument, not parameter :) ) is the folder where your SASS files are, the second one if the folder where your CSS are or should be. If you don’t have these folder, create them. Also make sure PHP has write-rights to the css folder, so do a

sudo chmod -R 777 public/css

while being in var/www. Please note that this is just for development, on a production server we don’t need the css folder to be writeable in any way.

Now install the Composer dependencies via

composer install

or

composer update

Composer automatically installs everything in require and require-dev by default.

[wp_ad_camp_2]

See the result

Now edit app/views/hello.php and put something like

<link rel="stylesheet" type="text/css" href="css/style.css">

into the head to make sure we really load a .css file. Also delete the entire default style block (so it don’t confuses you in any way).

Create a style.scss in public/scss and put some basic SASS rules in it, like

$color_one: green;
$color_two: yellow;

body {
    background-color: $color_one;
    .welcome {
        background-color: $color_two;
    }
}

and run your app. You should instantly see the startscreen with weird colour, defined by the above SASS file. Voila!

 

In production

When going to production, make sure you install your Composer dependencies without the stuff defined in require-dev (which is just for development purposes), via

composer install --no-dev

Also make sure to comment out the new line in your index.php! Future version of the script will contain a development / production switch that doesn’t need manual actions.

 

Mixins

The @import of mixins now also works perfectly, but make sure that your mixin files are in exactly the same folder like your other .scss. I’m trying to add custom mixin paths to future versions of the script.

 

More

The project’s GitHub page
https://github.com/panique/laravel-sass

SASS documentation
http://sass-lang.com/guide