CakePHP Sandbox App v3

SASS and CakePHP

SASS is considered a really good alternative to LESS. With the AssetCompress plugin it can be easily used in CakePHP.

The following example contains a variable for the color and font as well as a nested nav structure. The compiled CSS (rendered in real time in the controller action when rails + sass is installed) is displayed below.

Demo/Example

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

becomes

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

Rendered successfully in real time?
(if no, please make sure sass via CLI is working).

Use cases

This is ideal when you want to keep things DRY. You can easily have PHP inject the data for the variables (e.g. $color) and create customizable schemes.