Logo
  • PHP
    • HipHop / HHVM
    • Modern PHP
    • PHPStorm
    • LAMP
    • Laravel
    • Composer
    • PDO
  • JavaScript
    • node.js
    • AngularJS
  • CSS
    • SASS
    • “CSS4” (CSS level 4)
  • HTML
  • Git
  • LAMP
  • Vagrant
  • UI / UX
  • Architecture of …
  • Off-Topic
With ♥ from Berlin
February 12, 2014
Chris
CSS, Featured, Laravel, PHP, SASS
31

Extremely easy SASS in Laravel (with pure PHP)

PreviousNext

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

 

This article was written quite a while ago (9 years), please keep this in mind when using the information written here. Links, code and commands might be outdated or broken.

Random articles

  • New features in SASS 3.3 (a talk by SASS-creator Chris Eppstein)New features in SASS 3.3 (a talk by SASS-creator Chris Eppstein)
  • [Link] How to set up HipHop, Nginx and Laravel in Ubuntu 12.04 LTS (in a Vagrant box)[Link] How to set up HipHop, Nginx and Laravel in Ubuntu 12.04 LTS (in a Vagrant box)
  • Generate Vagrant boxes with Laravel, HipHop, Nginx, WordPress, MySQL, MariaDB, MongoDB, RabbitMQ etc. with one clickGenerate Vagrant boxes with Laravel, HipHop, Nginx, WordPress, MySQL, MariaDB, MongoDB, RabbitMQ etc. with one click
  • How blind people use websites (video with Sina Bahram, blind accessibility researcher)How blind people use websites (video with Sina Bahram, blind accessibility researcher)
  • Install Laravel 4 on Ubuntu 12.04 LTS (a how-to tutorial)Install Laravel 4 on Ubuntu 12.04 LTS (a how-to tutorial)
  • How to install the mcrypt php extension (to use Laravel 4)How to install the mcrypt php extension (to use Laravel 4)
  • PHPStorm: 42 Tips and Tricks (47min video talk by Mikhail Vink at Dutch PHP Conference 2015)PHPStorm: 42 Tips and Tricks (47min video talk by Mikhail Vink at Dutch PHP Conference 2015)
  • What’s new in PHPStorm 9What’s new in PHPStorm 9
  • Experimenting with HHVM at Etsy (Link)Experimenting with HHVM at Etsy (Link)
CSSlaravelPHPSASSsidebar-sasssidebar-special
Share this

31 Comments

  • Johan van de Merwe
    August 2, 2017 11:22 pm

    I have just implemented it in Slim PHP Framework without a flaw. Worked out of the box as you described.

    Reply
  • Yosua J. C.
    September 4, 2015 3:16 pm

    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.

    Reply
  • John
    May 26, 2015 10:03 pm

    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.

    Reply
  • Spinosa
    March 17, 2015 11:14 am

    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

    Reply
  • mlops
    January 7, 2015 4:23 pm

    not work for me. I am using laravel artisan 4.1.31 version. using php artisa serve. Its possible using vagrant/laravel? tanks

    Reply
  • Usama Ahmed
    November 2, 2014 10:12 am

    VERY NICE TUTORIAL VERY SIMPLE VERY CLEAR THANK YOU SO MUCH

    Reply
  • Gerard
    June 2, 2014 12:58 pm

    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/”);
    }

    Reply
    • Chris
      August 16, 2014 9:57 pm

      Big Thanks!!! I’ll add something similar, in a backwards-compatible way, to future versions of the project!

      Reply
  • Axel
    May 29, 2014 1:53 pm

    is there a way to use compass?

    Reply
    • Chris
      August 24, 2014 6:41 pm

      Sure! Copy compass (https://github.com/Compass/compass/tree/stable/core/stylesheets) into the scss folder and @import the mixin you need. Done.

      Reply
      • John
        August 30, 2014 12:39 pm

        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

        Reply
        • Chris
          August 30, 2014 2:13 pm

          Then you need to use a “older” version of Compass for sure.

          Reply
          • John
            August 31, 2014 1:59 am

            Thanks. Got it working with 0.12.0, unfortunately the documentation has changed quite a bit since then.

  • Arjen
    May 11, 2014 11:34 pm

    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.

    Reply
    • Chris
      May 11, 2014 11:49 pm

      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.

      Reply
      • Arjen
        May 14, 2014 7:08 am

        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…

        Reply
  • flynsarmy
    March 3, 2014 6:00 am

    This is what gulp.watch() and gulp-ruby-sass are for :)

    Reply
    • flynsarmy
      March 3, 2014 9:52 am

      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

      It implements SCSS 3.2.12. It does not implement the SASS syntax, only the SCSS syntax.

      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.

      Reply
      • Chris
        March 3, 2014 10:10 am

        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.

        Reply
      • Chris
        March 18, 2014 1:50 pm

        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.

        Reply
        • flynsarmy
          March 18, 2014 1:53 pm

          Cool. Good stuff!

          Reply
  • lvsof
    February 18, 2014 10:30 pm

    update to my previous comment…
    I had to modify the line in index.php to this:

    SassCompiler::run(“public/scss/”, “public/css/”);

    Reply
    • Chris
      February 19, 2014 6:14 am

      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 ?

      Reply
      • Rick Gladwin
        May 13, 2014 8:12 am

        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.

        Reply
        • Ale Mohamad
          May 24, 2014 5:39 am

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

          Reply
      • lawrencealan
        October 14, 2014 9:43 pm

        actually, when installing per the instructions on laravel site, this is how things work.

        Reply
    • Chris
      August 16, 2014 10:00 pm

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

      Reply
  • lvsof
    February 18, 2014 9:34 pm

    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!

    Reply

Leave A Comment Cancel reply

Frontend Ops Conf 2014 – Sarah Goff-Dupont: Git, Continuous Integration and Making It Pretty (31min video)

This article was written quite a while ago (8 years), please keep this in mind when using the information written

bash-command-line-tutorial

Best introduction to unix command line / bash ever (by André Augusto Costa Santos)

This article was written quite a while ago (9 years), please keep this in mind when using the information written

A collection of beautiful ajax loaders / spinners in pure .svg / CSS

No images used, pure svg/css and scaleable. Bookmark now! Brent Jackson‘s ajax spinner / loader library on the project’s demo

How to setup a config-free WordPress, PHP and MySQL (for local development) in Windows 7 / 8 in under 3 minutes

If you need to setup WordPress for local development and don’t have time and nerve to go through the installation

Compare 250+ cloud server plans with Cloud Cost Calculator

How cool is that ? The Cloud Cost Calculator compares more than 250 cloud server plans of Amazon, Rackspace, DigitalOcean,

phpstorm-github-code-color-syntax-theme

Get Github’s syntax highlighting colors in PHPStorm

I really really like the colors on GitHub’s code previews but couldn’t find any themes that copy that in a

How to fix the ugly font rendering in Google Chrome

Update, August 2014: Google has rolled out Chrome 37, which finally fixes this issue nativly. Yeah! For historical reasons the

How to install/setup latest version of PHPMyAdmin on Ubuntu 12.04 LTS (Precise Pangolin)

As the official installation packages of most linux distributions are usually totally out of date (but that’s pure intention, to

First look on Gitter, the chat for GitHub

GitHub has definitly become the #1 platform for git-based public repositories on the planet, no question. The site offers excellent

php

Test out PHP 5.6alpha1 on Windows 7 / 8 with two clicks

The popular Apache-MySQLP-PHP stack EasyPHP has become very professional, maintained and especially modularized in the last 2 years, and when

1/4

Categories

Search

Support FLARUM, the future of PHP forum scripts (with some dollars on Kickstarter)
php uk conference
PHP Opcache Explained by Julien Pauli (video from PHP UK Conference 2014)
vagrant
A preinstalled Vagrant box with PHP HipHop / HHVM and Ubuntu 13.10 (Saucy Salamander)
[Link] Improving Smashing Magazine’s Performance: A Case Study
This is an experimental advertisement
How to install/setup latest version of PHPMyAdmin on Ubuntu 12.04 LTS (Precise Pangolin)
php
Why Modern PHP is Awesome And How You Can Use It Today (Slides by Matt Stauffer)
phpstorm-8
A PHPStorm shortcuts cheat sheet (for Windows, Mac OS and Linux)
O’Reilly’s Learning JavaScript Design Patterns by Addy Osmani for free
js javascript
JavaScript Testing Tactics (21min video by Justin Searls)
zend framework 3
First view on Zend Framework 3 by Matthew O’Phinney
[Link] Interesting: Designing a Nuclear Waste Warning Symbol That Will Still Make Sense in 10,000 Years
Rare Steve Jobs AND Bill Gates video interview from 2007’s D5 conference (90min)
set up a local virtual machine for development with vagrant and puphpet / puppet (and ubuntu, linux, php, apache, mysql)
A list of downloadable Vagrant boxes (CentOS 5.9 / 6.4, Ubuntu 12 / 13, Debian 6 / 7 / 7.1 / 7.2)
JavaScript ECMAScript6 – A short video introduction (5min)

Tags

apache bash centos composer conference coupon CSS debian fonts framework git GitHub hack HHVM HipHop HTML HTML5 IDE JavaScript JS LAMP laravel linux mod_rewrite MVC MySQL Nginx optimization PHP PHP 5.5 PHP 5.6 phpmyadmin PHPStorm security server SSD Ubuntu UI UX vagrant video virtual machine voucher VPS wordpress
Side-Project: Wordle-Solver:
www.wordle-helper.info

Pages

  • Privacy Policy
 
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT