bgi

Release 0.9.1

Generates background-image properties for the image files in current directory.

Homepage Repository npm Download

Keywords
background-image, less, sass
License
MIT
Install
npm install bgi@0.9.1

Documentation

bgi

Generates width, height and path variables and mixins of the images in specified directory.

Install this globally and you'll have access to the bgi command anywhere on your system.

npm install bgi -g

Example

LESS

bgi --pathVar imagepath --type less


@icon_Addlink-width:38px;
@icon_Addlink-height:37px;
@icon_Addlink-image:url("@{imagepath}icon_Addlink.png");
.icon_Addlink(){
  background-image:url("@{imagepath}icon_Addlink.png");
  background-size:38px 37px;
}
.icon_Addlink--block(){
  background-image:url("@{imagepath}icon_Addlink.png");
  background-size:38px 37px;
  width:38px;
  height:37px;
}

SASS

bgi --pathVar imagepath --type sass


$icon_Addlink-width:38px;
$icon_Addlink-height:37px;
$icon_Addlink-image:url("#{$imagepath}icon_Addlink.png");
@mixin icon_Addlink(){
  background-image:url("#{$imagepath}icon_Addlink.png");
  background-size:38px 37px;
}
@mixin icon_Addlink--block(){
  background-image:url("#{$imagepath}icon_Addlink.png");
  background-size:38px 37px;
  width:38px;
  height:37px;
}

Supported formats

  • GIF
  • JPEG
  • PNG
  • WebP

Command-Line Usage (CLI)

cd pathToImageDir
bgi --pathVar imagepath --type sass --retina

Options

src

Type: String Default: null

Specifies the source directory to be processed. Current directory will be used if not specified.

pathVar

Type: String Default: null

A string of the variable name which will be replaced with the path to the source directory. System file path will be used if not specified.

type

Type: String Default: less

Determines the output format of the final CSS style. The Value can be either 'less' or 'sass' at this time.

retina

Type: Boolean Default: false

Determines if images are for retina or not. If set to true, width and height values will be devided by 2.

outFile

Type: String Default: images.less OR images.sass

Determines the name of output file.

##Usage ###LESS

@imagepath:"../img/mypage/";
@import "@{imagepath}images.less";
div.icon--addlink{
  .icon_Addlink--block();
}
span.icon--addlink{
  .icon_Addlink();
}

###SASS

$imagepath:"../img/mypage/";
@import "#{$imagepath}images.scss";
div.icon--addlink{
  @include icon_Addlink--block();
}
span.icon--addlink{
  @include icon_Addlink();
}

Stats

Dependencies
2
Dependent packages
0
Dependent repositories
0
Total releases
6
Latest release
First release
Forks
0
Watchers
1
Contributors
0
Repository size
400 KB
SourceRank
7

Development practices

Source repo 2FA enabled
TEXT!
Package manager 2FA enabled
TEXT!
Is security responsive
TEXT!
Dependencies are managed
TEXT!
Issue-free release available
TEXT!
Succession plan available
TEXT!

The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.

Learn more →

Releases

0.9.1
0.9.0
0.8.5
0.8.4
0.8.3
0.8.2

Login to resync this project