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
Random articles
New features in SASS 3.3 (a talk by SASS-creator Chris Eppstein)
SASSmeister is a real-time JSfiddle for SASS / CSS. Awesome!
How blind people use websites (video with Sina Bahram, blind accessibility researcher)
Generate Vagrant boxes with Laravel, HipHop, Nginx, WordPress, MySQL, MariaDB, MongoDB, RabbitMQ etc. with one click
Install Laravel 4 on Ubuntu 12.04 LTS (a how-to tutorial)![[Link] How to set up HipHop, Nginx and Laravel in Ubuntu 12.04 LTS (in a Vagrant box)](https://www.dev-metal.com/wp-content/uploads/2013/10/hiphop-1-100x100.jpg)
[Link] How to set up HipHop, Nginx and Laravel in Ubuntu 12.04 LTS (in a Vagrant box)
October CMS, built on top of Laravel, is beautiful, clever and on the way to be the new #1 CMS
Creators of Laravel launch one-click-installations of Laravel (including nginx, PHP 5.5 etc.)
8 awesome pure CSS spinner / loader
Hi dev-metal, can you help me about this?
I’m using laravel 5.1, and used this package, and got nothing.
Also, I didn’t find “$app->run()” code.
I’m using Apache for my web server in XAMPP (OS: windows 7).
Thanks before for your help.
Tried implementing this, I love the Idea. I’m getting an error / issue with it writing the css file. Everything is in place, it’s just not compiling the css file to the css/ folder. Is there anything to help with this? My folder is set to 775 permissions, so it should be able to write to.
Hi, I’m using Laravel-sass and i don’t know how to solve this error
parse error: failed at `$browser-minimum-versions: (` ./assets/scss/compass/_support.scss on line 24
not work for me. I am using laravel artisan 4.1.31 version. using php artisa serve. Its possible using vagrant/laravel? tanks
VERY NICE TUTORIAL VERY SIMPLE VERY CLEAR THANK YOU SO MUCH
Thanks, it works great. I added this simple condition to the index.php to run the compiler in the development environment only:
// run SassCompiler during development
if(App::environment() == ‘local’){
SassCompiler::run(“scss/”, “css/”);
}
Big Thanks!!! I’ll add something similar, in a backwards-compatible way, to future versions of the project!
is there a way to use compass?
Sure! Copy compass (https://github.com/Compass/compass/tree/stable/core/stylesheets) into the scss folder and @import the mixin you need. Done.
No luck. It breaks it, apparently because Compass uses a newer feature from SASS 3.3.x which is not implemented. Related: https://github.com/leafo/scssphp/issues/146
parse error: failed at `$browser-minimum-versions: (` scss/compass/_support.scss on line 24
Then you need to use a “older” version of Compass for sure.
Thanks. Got it working with 0.12.0, unfortunately the documentation has changed quite a bit since then.
I have updated everything to the latest version, but I keep getting a parser error, while it is a fairly simple .scss file. It even goes wrong over a comment line: /* Global */
this is what laravel is giving me last error in stack trace:
if ($this->peek(“(.*?)(n|$)”, $m, $count)) {
throw new Exception(“$msg: failed at `$m[1]` $loc”);
I really hope someone can help me with this problem. I did everyting as instructed in the tutorial.
Are you 100% sure that the error come from laravel-sass ? If so, then you’ve probably wrong folder folder names or no rights to read/write.
using rick Gladwin’s comment I got it working…but when it fails to generate the css-file I am not getting any detailed error in my log…
This is what gulp.watch() and gulp-ruby-sass are for :)
The problem with using such an approach is that they often don’t (and this is the case with OPs package) implement the full SASS/SCSS API. Hell, go to the leafo/scssphp package OP uses. It specifically states
making this a SASS package that doesn’t implement SASS! Not to mention the package comes with 43 issues at the time of writing.
What I’m getting at is, using such a package can result in a pretty negative experience and may not even work as expected. It would be better to simply teach users how to install ruby and SASS and use it correctly.
Hey, the used compiler uses the scss syntax in the latest version 3.2.12. This is everything 99.99% of developers needs. SCSS syntax is de-facto standard, “classic” SASS or LESS are and should not be used, they are uncommon or outdated and should not be implemented anywhere. If you have a good reason to use “classic” sass/less, then you don’t need this tool (!). The laravel-sass GitHub page clearly says that btw. The 43 issues on the compiler project are mostly questions and small stuff, not real deal breakers. scssphp has been used by 1000s, is under heavy development (see dev branch, serves the latest 3.3), comes with tests (!) and is the best non-Ruby implementation you can get. But I totally agree with your point that it might be better to use the Ruby tool in a really professional workflow. Thanks for the feedback, I’ll add your concerns and possible Ruby-workflows to the article.
Hey again, I’ve just added a lot of information on the Ruby/PHP-implementation (and a recommendation on using the Ruby implementation if you want REAL SASS), a history of SASS/SCSS/LESS and the notice not to use old-school sass or less anymore.
Cool. Good stuff!
update to my previous comment…
I had to modify the line in index.php to this:
SassCompiler::run(“public/scss/”, “public/css/”);
Hello, this is not the default path! By default index.php is in /public, so the paths that come with the tool are working perfectly out-of-the-box as far as I know! Can you give more information about your environment ?
Just echoing Ivsof’s experience. Updating the line in index.php (which is in /public) to SassCompiler::run(“public/scss/”, “public/css/”); solved the issue and got the compiler running.
I’m running Laravel installed using the laravel.phar installer method from here: http://laravel.com/docs/installation. composer.json and artisan are both a level above /public, and I’m running ‘php artisan serve’ to run the app.
I did as Ivsof and Rick said, and it worked like a charm right away. And this happened with laravel.phar, clean installation with composer and downloading the github package and installing the vendor files with composer. Hope this comments help to your documentation (or even fix something).
actually, when installing per the instructions on laravel site, this is how things work.
Hey, me again! I just found out that your problem is based on a incorrect (and also insecure) setup of laravel on your side! No bashing or offending, just saying :) … The thing is that in Laravel (and other frameworks) the user that hits your server is routed directly to /public/index.php and all further requests are RELATIVE to this index.php! Reasons is to avoid the users access any other folders/.php files than index.php! Correct me if i’m totally wrong here, but I’m quiiiiite sure it’s this..
Amazing! This is exactly what I was looking for. But I can’t get it to work :(
I’m fairly new to laravel + sass, so just need some debugging tips. I’ve added the composer.json and index.php lines, gave my public/css folder full permissions, and created the style.scss file to play around with, but it doesn’t generate the style.css file when I run my laravel app. Any help for trying to debug the issue would be greatly appreciated. Also curious what the best way to debug scss syntax would be using your tool in general. Thanks!