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
Comments Off on Extremely easy SASS in Laravel (with pure PHP)

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

 

CSSlaravelPHPSASSsidebar-sasssidebar-special
Share this

ilovepreloaders – A tumblr collection of preloader animations

An excellent collection of preloaders (GIFs, Movies and real ready-to-copy&paste code) here in this wonderful blog: http://ilovepreloaders.tumblr.com/ This thing just

shadow dom

Crossbrowser-safe HTML5 video (IE6+) with a few lines of code and just one .mp4 video file

No time to read the full article ? Get the code directly here on GitHub: panique/html5-video. Publishing a video on

Berlin, prepare for TOA conference (15th – 17th of July)

If you are in Berlin right now (and have 80-300 € to spend and 2-3 days of holidays (or “spontanious

angularjs

Two excellent introductions into AngularJS by Todd Motto

If you are familiar with PHP frameworks and have a basic understanding of what a model, a controller and a

php

Redesigning the PHP logo – who wants ?

The current PHP logo is a really lovely one, it is highly accepted and has its own charme, transports a

Beautiful, minimal WordPress theme ZUKI by Elmastudio (with 30% discount)

First a little disclaimer: I’m not affiliated with the company, don’t get money (or anything else) for saying this and

Install MINI in 30 seconds inside Ubuntu 14.04 LTS

This is a guideline on how to install MINI – an extremely simple naked PHP application – more or less

hiphop php

HipHop VM reaches 100% green Unit Tests in Laravel, Drupal, Slim, CodeIgniter etc.

In September 2013 the PHP HipHop VM dev team wrote a very interesting article [1] about failing Unit Tests of

php

[Link] How to create, read, update and delete (CRUD) with PDO, MySQLi and MySQL the right way (prepared statements)

Mike Dalisay has written an excellent tutorial on the CORRECT USAGE of basic CRUD functions (create, read, update, delete) with

Google I/O 2014 – HTTPS Everywhere (video)

Excellent, essential and game-changing talk by Ilya Grigorik and Pierre Far (both of Google), explaining why you should always use

1/4

Categories

Search

-45% (or even 50%) off on DesignWall today
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)
sass
New features in SASS 3.3 (a talk by SASS-creator Chris Eppstein)
github-logo-octocat
GitHub rolls out .PSD diff and viewing
php
Redesigning the PHP logo – who wants ?
vagrant
A preinstalled Vagrant box with PHP HipHop / HHVM and Ubuntu 12.04 (Precise Pangolin)
php
Slides from International PHP Conference 2014
october cms
October CMS, built on top of Laravel, is beautiful, clever and on the way to be the new #1 CMS
js javascript
How JavaScript really works – An introduction into the JavaScript call stack by Philip Roberts (20min video)
angular js
Learn AngularJS in 20 (or 90) minutes with Dan Wahlin
css3-chrome-font
[Link] Retinafy your Site / Device by Nijiko Yonskai
First look on Gitter, the chat for GitHub
How to show the available version of a package (before doing apt-get install)
php
appserver.io – A New Way of Magento Enterprise Infrastructure (26min video talk)
ilovepreloaders – A tumblr collection of preloader animations

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