On the heels of the highly successful picture element Indiegogo project, the Responsive Images Community Group (RICG) continues to revise a draft spec for Element Queries. This document defines the need for syntax to control layouts based on the size of the component itself rather than the viewport, removing the need to create complex code for every possible exception that may arise.
Topics: gulp.js, CSS, Sass
There has been a long standing request in the Sass issue queue for separating out specific rules into their own stylesheet during compile. This is particularly useful for keeping all your conditional styles in one place while developing, but separating them out into their own stylesheet later using an automated task. Sam Richards solved this problem outside of Sass with a gulp plugin called gulp-css-target. The plugin works by parsing special CSS comments, and Sam has offered up a simple mixin to integrate into your Sass project for ease of use with the plugin.
Through several useful and reusable examples, this article explains interpolation in Sass. In great detail, Hugo Giraudel shows us benefits of variable interpolation with strings, inside CSS functions, CSS at-directives, and generating CSS selectors.
What happened recently
It's been a big week for developer tool improvements!
- Chrome DevTools added media query viewer and network throttling (including offline) to mobile emulation. — @f12devtools
- Firefox Nightly added support for the newly named color: rebeccapurple — @Browserphile
- Debug Safari and Chrome on iOS and Android via Firefox's WebIDE in Developer Tools (soon) — @robertnyman
- Chrome DevTools added the ability to search styles, domain filtering, and edit Shadow DOM content — @umaar
- NYC Times dropped IE8 support, visitors prompted to upgrade. — @mericson
Craving more? Subscribe to our Flipboard mag for daily updates or sign up for our newsletter below.