jdsteinbach

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

jdsteinbach

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

jdsteinbach

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$config: (
  margin: 20px,
  padding: 10px 0,
  color: red
);

jdsteinbach

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$green: #6AB86A;

div {
  &::after {
    content: #{lighten($green,10%)};

jdsteinbach

Documentation

If you're not familiar with these PHP functions, read this documentation: printf() / sprintf().

Benefits of s/printf()

Cleaner Validation

All template code requires validation: if a variable (or array key/value) doesn't exist or doesn't contain data, we don't want to print empty HTML. Writing "pure" PHP with s/printf() for markup makes validation logic easier to see and shorter to write.

jdsteinbach

<?php
header('Content-Type: application:json');
header("Access-Control-Allow-Origin: *");

/* CONFIG - EDIT THESE VARIABLEs TO YOUR HEART'S CONTENT */

$shirt_url = 'https://cottonbureau.com/products/your-shirt';
$cache_duration = 60; // in minutes

$notification_email = 'test@test.com';

jdsteinbach

<p class="output">
  The output number is
</p>

jdsteinbach

<p class="output">
  The output number is
</p>

jdsteinbach

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$future-proof: true;
$future-properties: rotate scale translate;

@function generate-single-property($arg) {
  $start-pos: str-index($arg, '(');

jdsteinbach

.brand-red I'm red!
.brand-blue I'm blue!
.brand-orange I'm orange!
.brand-yellow I'm yellow!