# gulp.spritesmith.3x

> Convert a set of images into a spritesheet and CSS variables via gulp, support @3x

Latest version **1.0.9** (published 2018-10-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install gulp.spritesmith.3x
pnpm add gulp.spritesmith.3x
yarn add gulp.spritesmith.3x
bun add gulp.spritesmith.3x
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2018-10-07 |
| First published | 2018-09-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 255.6 KB |
| Known vulnerabilities | 0 (+6 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Maicon Furtado |
| Maintainers | maiconkf |
| Keywords | gulpplugin, spritesmith, sprite, spritesheet |

## Links

- npm: https://www.npmjs.com/package/gulp.spritesmith.3x
- Repository: https://github.com/maiconkf/gulp.spritesmith.3x
- Homepage: https://github.com/maiconkf/gulp.spritesmith.3x#readme
- Issues: https://github.com/maiconkf/gulp.spritesmith.3x/issues
- npm.io page: https://npm.io/package/gulp.spritesmith.3x

## Dependencies (8)

- [url2](https://npm.io/package/url2.md) ~1.0.4
- [async](https://npm.io/package/async.md) ~2.1.5
- [through2](https://npm.io/package/through2.md) ~2.0.3
- [gulp-util](https://npm.io/package/gulp-util.md) ~3.0.8
- [minimatch](https://npm.io/package/minimatch.md) ~3.0.3
- [underscore](https://npm.io/package/underscore.md) ~1.8.3
- [spritesmith](https://npm.io/package/spritesmith.md) ~3.3.0
- [spritesheet-templates-3x](https://npm.io/package/spritesheet-templates-3x.md) latest

## Recent versions

- 1.0.9 (latest) — 2018-10-07
- 1.0.8 — 2018-10-01
- 1.0.7 — 2018-09-28
- 1.0.6 — 2018-09-28
- 1.0.5 — 2018-09-28
- 1.0.3 — 2018-09-28
- 1.0.2 — 2018-09-28
- 1.0.1 — 2018-09-28
- 1.0.0 — 2018-09-28

## README

# gulp.spritesmith.3x 
Convert a set of images into a spritesheet and CSS variables via gulp, support @3x.
Support: `css`, `scss`, `stylus` and `json`.

Based on [gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith)

## Getting Started
`npm i gulp.spritesmith.3x`

```javascript
var gulp = require('gulp');
var sprite = require('gulp.spritesmith.3x');

gulp.task('sprite', function() {
  var spriteData = gulp.src('./dist/img/sprite/*.png')
    .pipe(sprite({
      retinaSrcFilter: './dist/img/sprite/*@2x.png',
      retinaImgName: 'sprite@2x.png',
      retina3xSrcFilter: './dist/img/sprite/*@3x.png',
      retina3xImgName: 'sprite@3x.png',
      imgName: 'sprite.png',
      imgPath: '../img/sprite.png',
      retinaImgPath: '../img/sprite@2x.png',
      retina3xImgPath: '../img/sprite@3x.png',
      cssName: 'sprites.css'
    }));

  spriteData.img.pipe(gulp.dest('./dist/img/'));
  spriteData.css.pipe(gulp.dest('./sass/'));
});
```

#### SCSS
```scss
.icon-home {
   @include retina-sprite($home-group, $home-group-3x);
}
```

#### SASS
```sass
.icon-home
  @include retina-sprite($home-group, $home-group-3x)
```

#### LESS
```less
.icon-home {
  .retina-sprite(@home-group, @home-group-3x);
}
```

#### Stylus
```stylus
.icon-home {
  retinaSprite($home_group, $home_group_3x);
}
```

---
_Source: https://npm.io/package/gulp.spritesmith.3x · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._