hjortureh

<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

hjortureh

<img src="small.jpg"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw,
            100vw"
     alt="A rad wolf" />

hjortureh

@include "variables";
$module: ".toolbar";

#{$module}__search-input {
  &:focus {
    border: 1px solid $active-color;
  }
  @include if-wider-than($medium-breakpoint) {
   /* styles for this breakpoint */
  }

hjortureh

.toolbar__search-input {
  display: none;
  width: 300px;
}
.toolbar--active .toolbar__search-input {
  display: block;
}
.toolbar__search-input:focus {
  border: 1px solid #121221;
}

hjortureh

.toolbar__search-input {
  display: none;
  width: 300px;
  .toolbar--active & {
    display: block;
  }
  &:focus {
    border: 1px solid #121221;
  }
  @media screen and (min-width: 900px) {

hjortureh

.toolbar__search-input { 
  display: none;
  .toolbar--active & {
    display: block;
  }
}

hjortureh

<section class="toolbar toolbar--active">
	<input class="toolbar__search-input" type="search" />
</section>

hjortureh

@mixin if-min-resolution($dppx) {
  @include if-resolution(min, $dppx) {
    @content;
  }
}

@mixin if-max-resolution($dppx) {
  @include if-resolution(max, $dppx) {
    @content;
  }

hjortureh

@include if-min-resolution(1.5) {
  .success,
  .infinity,
  .shopping-bag,
  .map {
    background-image: url("http://src.responsive.io/w=400/#{$image-url}");
    background-size: 200px 200px;
  }
}

hjortureh

$image-url: "http://mydomain.com/sprite@2x.png"

%sprite {
  background: url("http://src.responsive.io/w=200/#{$image-url}") no-repeat 0 0;
}
.success {
  @extend %sprite;
  background-position: 0 0;
}
.infinity {