Generate margins mixin

💻 Helpful sass mixin to generate margin/padding utility classes.

Installation

Install via npm/yarn

$ npm i generate-margins-mixin --save-dev
# or ... 
$ yarn add generate-margins-mixin --dev

Usage

Import via Sass/SCSS

// where you handle sass imports (e.g app.sass)
@import "generate-margins-mixin"

Use the mixin to generate new sets of margin/padding utility classes like below:

Sass

+generate-margins(5)

SCSS

@include generate-margins(5);

The above example will generate a new set of margin/padding utility classes with a value of 5px:

.margin-5 //margin: 5px !important
.margin-top-5 //margin-top: 5px !important
.margin-bottom-5 //margin-bottom: 5px !important
.margin-left-5 //margin-left: 5px !important
.margin-right-5 //margin-right: 5px !important
 
.padding-5 //padding: 5px !important
.padding-top-5 //padding-top: 5px !important
.padding-bottom-5 //padding-bottom: 5px !important
.padding-left-5 //padding-left: 5px !important
.padding-right-5 //padding-right: 5px !important

Author

• Robbin Johansson

License

Generate margins mixin is an open-sourced software licensed under the MIT license.

Happy coding! 🙌