Automatic SASS-to-CSS compiling for Laravel 4 (and any other framework by the way) while being in development.
Every time you run your app (hitting index.php) laravel-sass will automatically compile all .scss files in your scss
folder to .css files in your css folder. Support latest version of SASS (scss syntax) and mixins. Boom!
Installation & Usage
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.
Add this line into your public/index.php in Laravel, right before$app->run();.
The first parameter is the relative path to your scss folder (create one) and the second parameter is the relative
path to your css folder. Usually it totally makes sense to create those folders in the public folder.
Make sure PHP can write into the css folder by giving the folder
sudo chmod -R 777 public/css (when being in /var/www).
Note: 777 is just for development, in a production server there's no need to give that folder any write-rights.
Install or update your Composer dependencies to add laravel-sass by doing composer install or composer update.
Composer automatically installs everything in require-dev by default.
IMPORTANT: When you later deploy your application and don't want to install the require-dev stuff, then do
composer install --no-dev (or composer update --no-dev).
There's an optional third parameter for SassCompiler::run() that expects one of the strings explained on
http://leafo.net/scssphp/docs/#output_formatting. This defines the desired output. scss_formatter is the standard
laravel-sass uses, choose scss_formatter_compressed if you need a minimized css file. scss_formatter_nested is
for nested output, optimized for readability.
To test if everything works okay, simply add this to the head of app/views/hello.php:
<link rel="stylesheet" type="text/css" href="css/style.css"> and put a file called style.scss in your scss folder.
Now run the app and play around with the (s)css rules in your style.scss, after each refresh you should see the changes
How @import works
The @import of sass rules from other files works now perfectly. Make sure to import the files like it should be:
If the file is called _colors.scss and is in the basic scss folder:
If the file is called _colors.scss and is in the subfolder modules of the basic scss folder:
Read the official docs for more.
When deploying ...
.. then make sure you comment out this line again: SassCompiler::run("scss/", "css/");. Future releases of this
tool will have a development/production switch/recognizer.