Cacher is the code snippet organizer for pro developers

> 1%
last 2 versions

<div class="test"></div>
<div class="test2"></div>

.test {
  value: simensions;
  background: url("https://unsplash.it/800/450/?image=1002") no-repeat center;
  background-size: cover;
  min-width: 100%;
  height: 50vh;
}

.test2 {
  value: simensions;
  background: url("https://unsplash.it/400/300/?image=1072") no-repeat center;
  background-size: cover;
  min-width: 100%;
  height: 50vh;
}

// ----
// libsass (v3.5.0.beta.2)
// ----

// https://picsum.photos/?image=1072
$dummy-img-provider-url: 'https://unsplash.it/' !default;
$dummy-images : (
  cars: (1070,1071,1072,1013),
  peoples: (1027,1005,1001,996,978,974),
  nature: (1035,1036,1037,1039,1064,1044,1012,1011,1006,980,977),
  animals: (1074,1003),
  sea: (1041,1019,1002,994,990,989,970),
  food: (999,),
  work: (),
  architectural: (1031,985,983),
  city: (1067,1048,1033,985,972),
  sport: (1077,1011,)
);

$breakpoints: (
  'phone': 480px,
  'medium': 790px,
  'large': 1050px,
) !default;


@function get-dimensions($breakpoint: 'phone', $ratio: '16:9' ){
  $dimensions: ();
  $width:'';
  @if ( map-get($breakpoints, $breakpoint)){
    $width: map-get($breakpoints, $breakpoint);
  }
  @if ($ratio == '16:9'){
    
    $dimentions: ($width, ($width * (16/9) )) ;
    $ratio: $dimensions;
  }
  @return $ratio;
}



@mixin dummy-bg-image($dimensions: '1000/650', $theme: cars, $background-size: cover){
  $images: map-get($dummy-images,$theme);
  $image: nth($images, random(length($images)));
  $url: $dummy-img-provider-url + $dimensions + '/?image=' + $image ;
  value: get-dimensions();
  background: url('#{$url}') no-repeat center;
  // background-repeat: no-repeat;
  // https://developer.mozilla.org/fr/docs/Web/CSS/background-size
  // 
  background-size: $background-size;
  //background-origin: content-box;
  //background-position: center bottom;
}






.test{
  // 16:9
  @include dummy-bg-image('800/450', sea,cover);
  min-width: 100%;
  height: 50vh;
  
}
.test2{
  // 4:3
  @include dummy-bg-image('400/300', cars);
  min-width: 100%;
  height: 50vh;
}

.test