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

phpstorm-8

A PHPStorm shortcuts cheat sheet (for Windows, Mac OS and Linux)

Shortcuts that will make you life so much easier! Please note: Frontend Devs might be irritated by the weird CTRL-Y-shortcut,

Increase your HTML / CSS coding speed with EMMET

Codeninja.com just published a very interesting article about the excellent free code-completion/code-generation tool EMMET, which allows you to create huge

Creators of Laravel launch one-click-installations of Laravel (including nginx, PHP 5.5 etc.)

Again, a game changer: Taylor Otwell, creator of Laravel (which is currently the most popular PHP framework), has released FORGE

Microsoft enters post-password era with Hello (promo video)

Just a short promotion clip, but definitly interesting: Microsoft announces Hello, the authentication system inside Windows 10, using fingerprints, iris

DEF CON 18 – When your computer got stolen and you can still SSH into it: “Pwned by the 0wner” (22min conference talk)

A fantastic masterpiece of a conference talk: Mac got stolen. Bummer! Two years later: owner SSHs into it (!), installs

php

Somebody is writing a compiler for PHP, compiles down to machine code, outperforms HHVM

Yes, that’s right. Recki-CT compiles PHP down to machine code. It’s unbelievable what’s going on in the PHP world in

php

Postmodern PHP: appserver.io, a multithreaded application server for PHP, written in PHP

There’s a lot of very interesting stuff going on in the PHP scene right now, I have the feeling this

modern-php

Creator of Slim framework and “PHP – The right way” writes book: “Modern PHP”, available 2015

Definitly something every non-superexpert-PHP-developer should have on its books-to-buy-in-2015-list: Josh Lockhart, creator of the legendaray Slim framework and the famous

php

Must-read PHP blog: PHPweekly.com

Probably one of the best ressources for your weekly doze of news from the PHP scene: phpweekly.com simply publishes a

8 awesome pure CSS spinner / loader

Excllent spinner / loader in pure CSS, made with just one element (even if the demo shows this in a

1/4

Categories

Search

php
A super-simple introduction into PHP namespaces (7min video)
node.js
PayPal drops Java, goes node.js / JavaScript
php
Somebody is writing a compiler for PHP, compiles down to machine code, outperforms HHVM
hiphop php
PHP’s HipHop outperforms PHP 5.5 with Zend OPCache and Nginx by 15-20 times
sass
New features in SASS 3.3 (a talk by SASS-creator Chris Eppstein)
times-new-roman
The Times talks about Times New Roman (3min video)
compress-png
Compress png, jpeg, gif and svg up to 90% with Compressor.io
Quick fix for 404 error in WordPress category / tag page
The New Era of JavaScript (28min conference talk, Jack Franklin, 2013)
php-legacy-code
Interesting talk on modernizing a legacy PHP codebase
mod-rewrite-ubuntu-14-04-lts
EOL lists of Ubuntu, Debian and CentOS for your server plannings
phpstorm-8
When PHPStorm’s cache eats up your harddisk space
html6
Is this the first HTML6 specification?
php
How to install sqlite driver for PHP in Ubuntu & Debian
hearthbleed-ssl-bug
A quick guideline on how to fix the Hearthbleed bug (and update OpenSSL) on Ubuntu

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