0.2.3 • Published 8 years ago
css-image v0.2.3
generator css and scss templates for images
Examples
var imagecss = require("css-image");
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;
$img_t__path: 'root/t-50pc.png';
@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;
$img_t-s2__path: 'root/t.png';
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; $img_t__path: 'root/t.png';
squeeze: squeeze image in
squeeze
timestype: 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; $img_t__path: 'root/t.png'; @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; $img_t-s2__path: 'root/t.png';
separator: separator for generating names
type: string
default: "_"prefix: prefix for generating names
type: string
default: "img_"
ChangeLog
- 0.2.1 add image_path variable to sass mode allow empty prefix
- 0.1.0 rename css-image
- 0.0.2 add separator option
- 0.0.1 Basic functionality