# postcss-spacing

> Postcss plugin to add spacing properties as shortcuts

Latest version **0.2.5** (published 2015-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-spacing
pnpm add postcss-spacing
yarn add postcss-spacing
bun add postcss-spacing
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.5 |
| Published | 2015-12-12 |
| First published | 2015-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Camilo Tapia |
| Maintainers | camilo.tapia |

## Links

- npm: https://www.npmjs.com/package/postcss-spacing
- Repository: https://github.com/24hr-malmo/postcss-spacing
- Homepage: https://github.com/24hr-malmo/postcss-spacing#readme
- Issues: https://github.com/24hr-malmo/postcss-spacing/issues
- npm.io page: https://npm.io/package/postcss-spacing

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^5.0.12

## Recent versions

- 0.2.5 (latest) — 2015-12-12
- 0.2.4 — 2015-12-12
- 0.2.3 — 2015-12-12
- 0.2.1 — 2015-12-12
- 0.2.0 — 2015-12-11
- 1.0.0 — 2015-12-11

## README

# PostCSS Spacing

PostCSS plugin for simpler control of all paddings and margins in your project. The original idea of having a global padding and margin setup was created by [Jens Nilsson](https://github.com/jensjns) when he created it as classes in [stylus](https://learnboost.github.io/stylus/). 

This plugin uses the same idea but implements it as custom CSS properties. You basically have a shortened version of all paddings and margins properties and define what each size will correspond to. 

Its much easier to understand in code:

First we define what each margin and padding step will correspond to:

    @spacing 1rem, 2rem, 4rem, 8rem;

Then we can use it in our css:

    #main {
        pa: 1;
        mt: 3;
    }

Which will create the following CSS:

    #main {
        padding: 1rem;
        margin-top: 4rem;
    }

The power of having defined steps is that you have one place where you set all spacings, which makes it quite easy to change if the design changes.

The other benefit is that media queries can be used to change all paddings and margins easily as well:

    @spacing 1rem, 2rem, 4rem, 8rem;

    #main {
        pa: 1;
        mt: 3;
    }

    @media (min-width: 100px) {
        @spacing 20px, 40px, 80px, 160px;
    }


Which will create the following CSS:

    #main {
        padding: 1rem;
        margin-top: 4rem;
    }

    @media (min-width: 100px) {
        #main {
            padding: 20px;
            margin-top: 80px;
        }
    }

## Properties

The css properties are:

    pa = padding
    pt = padding-top
    pb = padding-bottom
    pl = padding-left
    pr = padding-right

    ma = margin
    mt = margin-top
    mb = margin-bottom
    ml = margin-left
    mr = margin-right

## How to use it

### Gulp

    const gulp = require('gulp');
    const postcss = require('gulp-postcss');
    const postcssSpacing = require('postcss-spacing');

    gulp.task('css', () => {
        return gulp.src('./src/**/*.css')
            .pipe(postcss([
                postcssSpacing()
            ]))
            .on('error', console.error)
            .pipe(gulp.dest('./dist'));
    });

    gulp.task('watch', ['css'], () => {
        gulp.watch(['./src/**/*.css'], ['css']).on('error', handleError);
    });

    gulp.task('build', ['css'], () => {});

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