image-css

generator css and scss templates for images

Examples

var imagecss = require("image-css");
var files = [{
  width: 400,
  height: 300,
  file: "t.png"
}];
var result = imagecss(files ,{
  css: true,
  scss: true,
  retina: true,
  squeeze: 2,
  root: "root"
})

result is

.img_t{ 
  width: 400px;
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
} 
@media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
  .img_t{ 
    width: 400px; 
    height: 300px; 
    background-image: url(root/t-50pc.png); 
    background-size: 400px 300px; 
  } 
} 
.img_t-s2{ 
  width: 200px; 
  height: 150px; 
  background-image: url(root/t.png); 
  background-size: 200px 150px; 
} 
@mixin img_t(){ 
  width: 400px; 
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
  @media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
    width: 400px; 
    height: 300px; 
    background-image: url(root/t-50pc.png); 
    background-size: 400px 300px; 
  } 
} 
$img_t__width: 400px; 
$img_t__height: 300px; 
@mixin img_t-s2(){ 
  width: 200px; 
  height: 150px; 
  background-image: url(root/t.png); 
  background-size: 200px 150px; 
} 
$img_t-s2__width: 200px; 
$img_t-s2__height: 150px;

Options

• root: path to folder where images locate

type: String
default: ""
example:

  file: `test/image.png`  
  root: `images`  
  result: `images/test/image.png`

• css: generate css

type: Boolean default: false
example:

.img_t{ 
  width: 400px;
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
} 

• scss: generate scss

type: Boolean
default: false
example:

@mixin img_t(){ 
  width: 400px; 
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
}

• retina: generate media-query for retina images, file must locates in the same folder with the same name with retina postfix

type: Boolean|String
default: false
example:
for css

.img_t{ 
  width: 400px;
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
} 
@media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
  .img_t{ 
    width: 400px; 
    height: 300px; 
    background-image: url(root/t-50pc.png); 
    background-size: 400px 300px; 
  } 
} 

for scss

  @mixin img_t(){ 
  width: 400px; 
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
  @media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
    width: 400px; 
    height: 300px; 
    background-image: url(root/t-50pc.png); 
    background-size: 400px 300px; 
  } 
} 
$img_t__width: 400px; 
$img_t__height: 300px; 

• squeeze: squeeze image in squeeze times

type: Int
default: 1
example: squeeze=2
for css

.img_t{ 
  width: 400px;
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
} 
.img_t-s2{ 
  width: 200px; 
  height: 150px; 
  background-image: url(root/t.png); 
  background-size: 200px 150px; 
} 

for scss

@mixin img_t(){ 
  width: 400px; 
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
} 
$img_t__width: 400px; 
$img_t__height: 300px; 
@mixin img_t-s2(){ 
  width: 200px; 
  height: 150px; 
  background-image: url(root/t.png); 
  background-size: 200px 150px; 
} 
$img_t-s2__width: 200px; 
$img_t-s2__height: 150px;

ChangeLog

• 0.0.2 add separator option
• 0.0.1 Basic functionality