Last Updated: February 25, 2016
· keyboardcowboy

CSS Mixin for Jade

The Jade HTML compiler is supposed to make it dead simple to create an HTML layout. Creating elements with many attributes, however, is time consuming. It's just about as easy to write out the element itself. Here's a little mixin to shortcut entering a CSS link element into your header.

The Jade mixin:

mixin css(file, media)
  - media = media || 'all'
  link(type="text/css", rel="stylesheet", media="#{media}", href="#{file}.css")

Add it to your Jade template:

mixin css('styles')

Results in:

<link type="text/css" rel="stylesheet" media="all" href="styles.css"/>