Sass’s trailing ampersand and modular code

I recently learned of a feature of Sass that I think is extremely powerful, and little known about. I’m not even sure if it has a proper name*, so I’ll make one up and call it the “insert parent selector”. And it can help you deal with exceptions or variations that might make otherwise modular code become unruly.

And all it comes down to is a trailing ampersand – “&”.

Read MoreLeave a comment

SASS, Livereload and Chrome Dev Tool crashes

I’ve been experiencing a bizarre behavior when using:

  • SASS/SCSS
  • Livereload (either via the app or a command line utility like Grunt)
  • Google Chrome
  • Having Google Chrome Dev Tools open

Where, every time I make a change to an .scss file, and Chrome Dev Tools are open in the relevant window – it will crash when Livereload attempts to update the page.

Aw Snap! Error when using Livereload and Chrome Dev Tools

Read More2 Comments

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