Fast color helpers with SASS Lists

Yep, it’s that time of the week again. Time for more insanely optimized helper classes in SASS.

Let’s talk about colors. So, say you have a list of color variables:

1
2
3
4
5
6
7
8
$blue:      #0ab0ed;
$blue-dark: #0064cd;
$green:     #8da1ae;
$red:       #f06338;
$yellow:    #e7dfb1;
$orange:    #f89406;
$pink:      #c3325f;
$purple:    #7a43b6;

You probably want some helper classes to pepper through your code, like .color-blue or .bg-blue. Fortunately, with SASS lists, this process is almost as easy as typing out the variables in the first place.

Set up a list:
variables_and_overrides.scss
1
2
3
4
5
6
7
8
9
10
$colors: (
  $blue blue,
  $blue-dark blue-dark,
  $green green,
  $red red,
  $yellow yellow,
  $orange orange,
  $pink pink,
  $purple purple
  );

Simple enough, right? Okay, now let’s set up our mixins.

Set up some mixins using interpolation and nth:
variables_and_overrides.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin generate-colors() {
  @each $color in $colors {
    .color-#{nth($color, 2)} {
      color: nth($color, 1);
    }
    .bg-#{nth($color, 2)} {
      background: nth($color, 1);
    }
    .border-#{nth($color, 2)} {
      border-color: nth($color, 1);
    }
  }
}
Call your mixin:
variables_and_overrides.scss
1
@include generate-colors();
Lust at the beautiful helpers at your fingertips:
application.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.color-blue {
  color: #0ab0ed; }

.bg-blue {
  background: #0ab0ed; }

.border-blue {
  border-color: #0ab0ed; }

.color-blue-dark {
  color: #0064cd; }

.bg-blue-dark {
  background: #0064cd; }

.border-blue-dark {
  border-color: #0064cd; }

.color-green {
  color: #8da1ae; }

.bg-green {
  background: #8da1ae; }

.border-green {
  border-color: #8da1ae; }

.color-red {
  color: #f06338; }
...
Side note on speed:

If you aren’t using it yet, I really encourage you to start using gulp-sass, which is built ontop of node-sass right now.

File saves are often under 200ms, which is practically instant; and you can get away with doing some pretty insane loops and code generation really quickly and easily. I’m working on a few Rails projects and plan on continuing to use this process instead of the native Rails SASS simply because the speed is extraordinary.

Speeding Up WordPress, Advanced Custom Fields, and more with helper functions

I don’t particularly love working in WordPress, because at this point I feel everything I’ve ever needed to do, I’ve done many times before. I’ve just seen about everything imagineable when it comes to WordPress development, and until tonight thought it was mostly a cut and run kind of deal.

With a recent project I’ve been focusing on really, really optimizing and elegantly developing my theme using DRY code. It’s been an admittedly fun process seeing my templates completely dry up, and while PHP is often messy (it’s official, I now hate semicolons, by the way) it has saved me quite a bit of time rolling boilerplate code.

I’m using the awesome Advanced Custom Fields plugin, which I have to give credit to Elliot Condon for. He’s really made a powerful system that in my opinion is one of the best open-sourced CMS platforms I’ve ever seen. It’s quite incredible what you can do with it now, really.

Here are a few examples of tricky things I’ve integrated into my theme that have helped save tons of time:

Button helper:

Outputs a quick button with optional internal page-link or external options. That there saved me 10 lines of boilerplate code.

page-home.php
1
<?php _s_custom_field_link('btn btn-primary'); ?>
functions-custom.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * custom field link helper
 * @param  string $className
 *         add a custom class name to element
 * @return string
 *         returns button text for view.
 */
function _s_custom_field_link($className) {
  $text = get_sub_field('button_text');
  if (!$className) {
    $className = 'btn btn-primary';
  }
  if (get_sub_field('external_button_link')) {
    // external link stuff
    $link = get_sub_field('external_button_link');
  } else {
    $link = get_sub_field('button_link');
  }
  // echo "<a href="$link">$text</a>";
  echo "<a class='$className' href='$link'>$text</a>";
}
Field conditional

Or take this for example, which I’ve found I do a lot. Say I want to have a field displayed, wrapped in an HTML tag, only if it’s present. And I want to avoid writing get_field vs. get_sub_field every time:

page-home.php
1
<?php _s_custom_field('title', 'h2', 'title', true); ?>
functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function _s_custom_field($name, $tag, $class = '', $subField = false) {
  if ($subField) {
    $function = get_sub_field;
  } else {
    $function = get_field;
  }
  if ($function($name)) {
    $str = '';
    $str .= "<{$tag} class='{$class}'>";
    $str .= $function($name);
    $str .= "</{$tag}>";
    echo $str;
  }
}

Link conditional, magic.

Grid wrappers

..or, avoid the semi-annoying Bootstrap grid wrappers:

page-home.php
1
2
3
<?php _s_grid_wrapper_start('col-md-6', true, 'hero'); ?>
  <h2>Hi, I am inside the <code>.col-md-6</code></h2>
<?php _s_grid_wrapper_end(); ?>
functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function _s_grid_wrapper_start($className = "col-md-12", $container = true, $containerClassName = "") {
  if ($container) {
    echo "<div class='container'>";
  }
  echo "<div class='row'>"
  ."<div class='$className'>";
}
// grid wrapper end
function _s_grid_wrapper_end($container = true) {
  echo "</div> <!-- .col- -->"
  ."</div> <!-- .row -->";
  if ($container) {
    echo "</div> <!-- .container -->";
  }
}

Voila, grid-ified:

1
2
3
4
5
6
7
<div class="container hero">
  <div class="row">
    <div class="col-md-6">
      <h2>Hi, I am inside the <code>.col-md-6</code></h2>
    </div>
  </div>
</div>

Just a few examples of using functions.php to help me cut up on writing code over and over again.

Side note: While working on this, I had an idea that would make it even more smooth. I’d love to see someone using Gulp and with a bleeding edge mentality develop a boilerplate theme using JADE templates or the otherwise. Any takers? Anyone out there trying to write advanced themes using WordPress?