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