Readme File.

Generate stylesheets with Sass, using Maps and Mixins.

The documentation you can find in the 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.

$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:

@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:

.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;
}