Useful SASS mixin – “prop-query”

Just wanted to share a little mixin that I came up with that’s pretty darned useful. I call it “prop-query”:

@mixin prop-query($min-size, $property, $value){
    @media screen and (min-width: $min-size){
        #{$property}: $value;
    }
}

It’s a pretty simple idea – it lets you specify a one-off rule that you want to change on a per-media query basis.

Use Case

A good use case for this might be the font size of your paragraph text inside your main area. It might looks something like this:

[role="main] p {
  font-size: 1.4em;
}

But when your screen gets to a certain point, say, 1000px wide, your line length gets too long. In comes prop-query:

[role="main] p {
  font-size: 1.4em;
  @include prop-query(1000px, font-size, 1.6em);
}

Which simply embeds a media query inside the rule, per SASS’s cool media query feature. It just does so in a much more succinct, readable way.

You can even change an element’s properties several times in a row:

[role="main] p {
  font-size: 1.4em;
  @include prop-query(1000px, font-size, 1.6em);
  @include prop-query(1200px, font-size, 1.8em);
  @include prop-query(1400px, font-size, 2em);
}

Usage

It’s pretty straightforward. You have three parameters to set – minimum screen width, your desired property, and the value. That’s it. If you’ve set your breakpoints as variables, those can be used for the first parameter.

Caveat

Use this * judiciously*, as it will result in very bloated CSS very quickly. It’s really designed for one-off properties that change on a per-media query basis.

I put it up as a gist here.

Update – Sublime Text Snippet

Thanks to commenter Scott Nix – he wrapped this up in a handy snippet for Sublime Text!

Read More2 Comments

Drupal & Codekit – Try Link CSS

As has been pointed out in other places, Drupal and Codekit don’t play well out of the box. Codekit, specifically, can’t inject SASS changes into a Drupal site without refreshing the page. “Live Editing” is one of it’s primary features.

Codekit is one of the main reasons I decided to really get into SASS at all. I’m coming from years of using CSSEdit, and am very, very used to a workflow involving live editing. Edit/save/refresh was always just way too slow.

So, being that I mainly work in Drupal these days, not having live SASS injection was a real bummer. I had to eventually try out LiveReload, which did work, but it wasn’t as elegant as Codekit.

As was pointed out by Nick Comito, what you needed to do was to link directly to your compiled style sheet after the normal Drupal styles, then voila – Codekit works perfectly.

I took what he suggested, and whipped up a Gist using the path_to_theme variable.

Looks like, though, someone else was having this same issue. Graham Bates helpfully contacted me through the Gist and pointed out that he had created a simple module – Link CSS, that does this for you.

I’ve tested it out, and sure enough, Codekit works like a dream with Drupal – check it out!

Read More3 Comments