# generator-modules

> Generator modules for Sass

Latest version **1.0.1** (published 2016-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install generator-modules
pnpm add generator-modules
yarn add generator-modules
bun add generator-modules
```

## 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.1 |
| Published | 2016-01-05 |
| First published | 2015-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Manuel Gonzalez |
| Maintainers | manuelitox |
| Keywords | Sass, Scss |

## Links

- npm: https://www.npmjs.com/package/generator-modules
- Repository: https://github.com/manuelitox/generator-modules
- Homepage: https://github.com/manuelitox/generator-modules#readme
- Issues: https://github.com/manuelitox/generator-modules/issues
- npm.io page: https://npm.io/package/generator-modules

## Recent versions

- 1.0.1 (latest) — 2016-01-05
- 1.0.0 — 2015-10-19

## README

## Readme File.

[![Build Status](https://api.travis-ci.org/manuelitox/generator-modules.svg?branch=master)](https://travis-ci.org/manuelitox/generator-modules)

Generate stylesheets with Sass, using Maps and Mixins.

The documentation you can find in the [sassdoc/index.html](https://github.com/manuelitox/generator-modules/blob/master/sassdoc/index.html) file

### Install:

1. ```$ npm i generator-modules ```
2. Import to your project ```@import 'node_modules/generator-modules/sass/main' ```

### Example:

First, we will declare the attributes that we want have in the style sheet.

```sass
$box: (
	background-color: red,
	color: white,
	margin: 20px
)!default;

$box-pseudo-class: (
	hover: (
		background-color: yellow
	),
	last-of-type: (
		margin-bottom: 0
	)
) !default;

$box-active: (
	background-color: gray,
	color: black
) !default;
```

Now, We go to work with the generator:

```sass
@include gen-component('box') {
	@include gen-attribute(padding, 10px);
	@include gen-attributes($box);
	@include gen-pseudo-selectors($box-pseudo-class);
	@include gen-state('active', $box-active);
	@include gen-internal-component('header') {
		@include gen-attribute(color, red);
	}
}
```


#### This's the result:

```css
.box {
	padding: 10px;
	background-color: red;
	color: white;
	margin: 20px;	
}
.box:hover {
	background-color: yellow;
}
.box:last-of-type {
	margin-bottom: 0;
}
.box.active {
	background-color: gray;
	color: black;
}
.box-header {
	color: red;
}
```

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