Little Miss Robot - Sass Utils

This package contains configuration objects to generate utility classes. Utility classes are simple and easy to use declerations and apply one type of style like spacing, typography, colors, ...

IMPORTANT

Make use of Dart Sass:

This library makes use of Dart Sass, which is the primary implementation of Sass. Make sure that your Sass compiler is making use of Dart Sass.
Generate only what you need:

This library generates classes based on your configuration. The larger the configuration, the more css, the larger the CSS file. DO NOT enable all the config options, but only the ones you actually use and need!

Install

# As a dependency
$ npm install @littlemissrobot/sass-utils
# As a dev-dependency
$ npm install --save-dev @littlemissrobot/sass-utils

Usage

Import the library from the node_modules folder:

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-utils" as _utils;

Pass the configuration to the dependencies and the library:

// Dependency
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-system" as _system with (
	$spacing: (),
	$breakpoints: (),
	$colors: (),
	$typography: ()
);

// Library
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-utils" as _utils with (
	$margin: (),
	$margin-top: (),
	$margin-bottom: (),
	$margin-left: (),
	$margin-right: (),
	$padding: (),
	$padding-top: (),
	$padding-bottom: (),
	$padding-left: (),
	$padding-right: (),
	$color: (),
	$background-color: (),
	$typography: ()
);

Margin

Class	Variable	Property
u-m-1	$margin	`margin`

@use "@littlemissrobot/sass-utils" as _utils with (
	$margin: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-m-1"></div>
<div class="u-m-2"></div>
<div class="u-m-3"></div>
<div class="u-m-1@vp-7"></div>
<div class="u-m-2@vp-7"></div>
<div class="u-m-3@vp-7"></div>
<div class="u-m-1@to-vp-7"></div>
<div class="u-m-2@to-vp-7"></div>
<div class="u-m-3@to-vp-7"></div>

Margin-x

Class	Variable	Property
u-mx-1	$margin-x	`margin-left`, `margin-right`

@use "@littlemissrobot/sass-utils" as _utils with (
	$margin-x: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-mx-1"></div>
<div class="u-mx-2"></div>
<div class="u-mx-3"></div>
<div class="u-mx-1@vp-7"></div>
<div class="u-mx-2@vp-7"></div>
<div class="u-mx-3@vp-7"></div>
<div class="u-mx-1@to-vp-7"></div>
<div class="u-mx-2@to-vp-7"></div>
<div class="u-mx-3@to-vp-7"></div>

Margin-y

Class	Variable	Property
u-my-1	$margin-y	`margin-top`, `margin-bottom`

@use "@littlemissrobot/sass-utils" as _utils with (
	$margin-y: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-my-1"></div>
<div class="u-my-2"></div>
<div class="u-my-3"></div>
<div class="u-my-1@vp-7"></div>
<div class="u-my-2@vp-7"></div>
<div class="u-my-3@vp-7"></div>
<div class="u-my-1@to-vp-7"></div>
<div class="u-my-2@to-vp-7"></div>
<div class="u-my-3@to-vp-7"></div>

Margin-top

Class	Variable	Property
u-mt-1	$margin-top	`margin-top`

@use "@littlemissrobot/sass-utils" as _utils with (
	$margin-top: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-mt-1"></div>
<div class="u-mt-2"></div>
<div class="u-mt-3"></div>
<div class="u-mt-1@vp-7"></div>
<div class="u-mt-2@vp-7"></div>
<div class="u-mt-3@vp-7"></div>
<div class="u-mt-1@to-vp-7"></div>
<div class="u-mt-2@to-vp-7"></div>
<div class="u-mt-3@to-vp-7"></div>

Margin-bottom

Class	Variable	Property
u-mb-1	$margin-bottom	`margin-bottom`

@use "@littlemissrobot/sass-utils" as _utils with (
	$margin-bottom: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-mb-1"></div>
<div class="u-mb-2"></div>
<div class="u-mb-3"></div>
<div class="u-mb-1@vp-7"></div>
<div class="u-mb-2@vp-7"></div>
<div class="u-mb-3@vp-7"></div>
<div class="u-mb-1@to-vp-7"></div>
<div class="u-mb-2@to-vp-7"></div>
<div class="u-mb-3@to-vp-7"></div>

Margin-left

Class	Variable	Property
u-ml-1	$margin-left	`margin-left`

@use "@littlemissrobot/sass-utils" as _utils with (
	$margin-left: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-ml-1"></div>
<div class="u-ml-2"></div>
<div class="u-ml-3"></div>
<div class="u-ml-1@vp-7"></div>
<div class="u-ml-2@vp-7"></div>
<div class="u-ml-3@vp-7"></div>
<div class="u-ml-1@to-vp-7"></div>
<div class="u-ml-2@to-vp-7"></div>
<div class="u-ml-3@to-vp-7"></div>

Margin-right

Class	Variable	Property
u-mr-1	$margin-right	`margin-right`

@use "@littlemissrobot/sass-utils" as _utils with (
	$margin-right: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-mr-1"></div>
<div class="u-mr-2"></div>
<div class="u-mr-3"></div>
<div class="u-mr-1@vp-7"></div>
<div class="u-mr-2@vp-7"></div>
<div class="u-mr-3@vp-7"></div>
<div class="u-mr-1@to-vp-7"></div>
<div class="u-mr-2@to-vp-7"></div>
<div class="u-mr-3@to-vp-7"></div>

Padding

Class	Variable	Property
u-p-1	$padding	`padding`

@use "@littlemissrobot/sass-utils" as _utils with (
	$padding: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-p-1"></div>
<div class="u-p-2"></div>
<div class="u-p-3"></div>
<div class="u-p-1@vp-7"></div>
<div class="u-p-2@vp-7"></div>
<div class="u-p-3@vp-7"></div>
<div class="u-p-1@to-vp-7"></div>
<div class="u-p-2@to-vp-7"></div>
<div class="u-p-3@to-vp-7"></div>

Padding-x

Class	Variable	Property
u-px-1	$padding-x	`padding-left`, `padding-right`

@use "@littlemissrobot/sass-utils" as _utils with (
	$padding-x: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-px-1"></div>
<div class="u-px-2"></div>
<div class="u-px-3"></div>
<div class="u-px-1@vp-7"></div>
<div class="u-px-2@vp-7"></div>
<div class="u-px-3@vp-7"></div>
<div class="u-px-1@to-vp-7"></div>
<div class="u-px-2@to-vp-7"></div>
<div class="u-px-3@to-vp-7"></div>

Padding-y

Class	Variable	Property
u-py-1	$padding-y	`padding-top`, `padding-bottom`

@use "@littlemissrobot/sass-utils" as _utils with (
	$padding-y: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-py-1"></div>
<div class="u-py-2"></div>
<div class="u-py-3"></div>
<div class="u-py-1@vp-7"></div>
<div class="u-py-2@vp-7"></div>
<div class="u-py-3@vp-7"></div>
<div class="u-py-1@to-vp-7"></div>
<div class="u-py-2@to-vp-7"></div>
<div class="u-py-3@to-vp-7"></div>

Padding-top

Class	Variable	Property
u-pt-1	$padding-top	`padding-top`

@use "@littlemissrobot/sass-utils" as _utils with (
	$padding-top: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-pt-1"></div>
<div class="u-pt-2"></div>
<div class="u-pt-3"></div>
<div class="u-pt-1@vp-7"></div>
<div class="u-pt-2@vp-7"></div>
<div class="u-pt-3@vp-7"></div>
<div class="u-pt-1@to-vp-7"></div>
<div class="u-pt-2@to-vp-7"></div>
<div class="u-pt-3@to-vp-7"></div>

Padding-bottom

Class	Variable	Property
u-pb-1	$padding-bottom	`padding-bottom`

@use "@littlemissrobot/sass-utils" as _utils with (
	$padding-bottom: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-pb-1"></div>
<div class="u-pb-2"></div>
<div class="u-pb-3"></div>
<div class="u-pb-1@vp-7"></div>
<div class="u-pb-2@vp-7"></div>
<div class="u-pb-3@vp-7"></div>
<div class="u-pb-1@to-vp-7"></div>
<div class="u-pb-2@to-vp-7"></div>
<div class="u-pb-3@to-vp-7"></div>

Padding-left

Class	Variable	Property
u-pl-1	$padding-left	`padding-left`

@use "@littlemissrobot/sass-utils" as _utils with (
	$padding-left: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-pl-1"></div>
<div class="u-pl-2"></div>
<div class="u-pl-3"></div>
<div class="u-pl-1@vp-7"></div>
<div class="u-pl-2@vp-7"></div>
<div class="u-pl-3@vp-7"></div>
<div class="u-pl-1@to-vp-7"></div>
<div class="u-pl-2@to-vp-7"></div>
<div class="u-pl-3@to-vp-7"></div>

Padding-right

Class	Variable	Property
u-pr-1	$padding-right	`padding-right`

@use "@littlemissrobot/sass-utils" as _utils with (
	$padding-right: (
		value: (1, 2, 3,),
		at: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		),
		to: (
			vp-3: (1, 2, 3,),
			vp-7: (1, 2, 3,)
		)
	)
);

<div class="u-pr-1"></div>
<div class="u-pr-2"></div>
<div class="u-pr-3"></div>
<div class="u-pr-1@vp-7"></div>
<div class="u-pr-2@vp-7"></div>
<div class="u-pr-3@vp-7"></div>
<div class="u-pr-1@to-vp-7"></div>
<div class="u-pr-2@to-vp-7"></div>
<div class="u-pr-3@to-vp-7"></div>

Color

Class	Variable	Property
u-color-primary	$color	`color`

There are different types of configuration. It depends whether your working with themes or scopes in the color configuration of the @littlemissrobot/sass-system library.

Simple

@use "@littlemissrobot/sass-utils" as _utils with (
	$color: (
		value: (
			"body",
			("brand", "primary"),
			("brand", "secondary")
		)
		at: (
			vp-7: (
				"body",
				("brand", "primary"),
				("brand", "secondary")
			)
		),
		to: (
			vp-7: (
				"body",
				("brand", "primary"),
				("brand", "secondary")
			)
		)
	)
);

<div class="u-color-primary"></div>
<div class="u-color-secondary"></div>
<div class="u-color-body"></div>
<div class="u-color-primary@vp-7"></div>
<div class="u-color-primary@to-vp-7"></div>
<div class="u-color-primary@to-vp-7"></div>
<div class="u-color-primary@to-vp-7"></div>

With themes

@use "@littlemissrobot/sass-utils" as _utils with (
	$color: (
		default: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		),
		dark: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		)
	),
);

With scopes

@use "@littlemissrobot/sass-utils" as _utils with (
	$color: (
		default: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		),
		inverse: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		)
	),
);

With themes and scopes

@use "@littlemissrobot/sass-utils" as _utils with (
	$color: (
		default: (
			default: (
				value: ("body",)
				at: (vp-7: ("body",)),
				to: (vp-7: ("body",))
			),
			inverse: (
				value: ("body",)
				at: (vp-7: ("body",)),
				to: (vp-7: ("body",))
			)
		),
		dark: (
			default: (
				value: ("body",)
				at: (vp-7: ("body",)),
        to: (vp-7: ("body",))
      ),
      inverse: (
        value: ("body",)
        at: (vp-7: ("body",)),
        to: (vp-7: ("body",))
      )
    )
  ),
);

Background-color

Class	Variable	Property
u-bg-primary	$bg	`bg`

There are different types of configuration. It depends whether your working with themes or scopes in the color configuration of the @littlemissrobot/sass-system library.

@use "@littlemissrobot/sass-utils" as _utils with (
	$background-color: (
		value: (
			"body",
			("brand", "primary"),
			("brand", "secondary")
		)
		at: (
			vp-7: (
				"body",
				("brand", "primary"),
				("brand", "secondary")
			)
		),
		to: (
			vp-7: (
				"body",
				("brand", "primary"),
				("brand", "secondary")
			)
		)
	)
);

<div class="u-bg-primary"></div>
<div class="u-bg-secondary"></div>
<div class="u-bg-body"></div>
<div class="u-bg-primary@vp-7"></div>
<div class="u-bg-primary@to-vp-7"></div>
<div class="u-bg-primary@to-vp-7"></div>
<div class="u-bg-primary@to-vp-7"></div>

With themes

@use "@littlemissrobot/sass-utils" as _utils with (
	$color: (
		default: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		),
		dark: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		)
	),
);

With scopes

@use "@littlemissrobot/sass-utils" as _utils with (
	$color: (
		default: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		),
		inverse: (
			value: ("body",)
			at: (vp-7: ("body",)),
			to: (vp-7: ("body",))
		)
	),
);

With themes and scopes

@use "@littlemissrobot/sass-utils" as _utils with (
	$color: (
		default: (
			default: (
				value: ("body",)
				at: (vp-7: ("body",)),
				to: (vp-7: ("body",))
			),
			inverse: (
				value: ("body",)
				at: (vp-7: ("body",)),
				to: (vp-7: ("body",))
			)
		),
		dark: (
			default: (
				value: ("body",)
				at: (vp-7: ("body",)),
        to: (vp-7: ("body",))
      ),
      inverse: (
        value: ("body",)
        at: (vp-7: ("body",)),
        to: (vp-7: ("body",))
      )
    )
  ),
);

Typography

Class	Variable
u-typo-h1	$typography

@use "@littlemissrobot/sass-utils" as _utils with (
	$typography: (
		value: ("h1",)
		at: (
			vp-7: ("h1",)
		),
		to: (
			vp-7: ("h1",)
		)
	)
);

<div class="u-typo-h1@vp-7"></div>
<div class="u-typo-h1"></div>
<div class="u-typo-h1@to-vp-7"></div>

@littlemissrobot/sass-utils

Little Miss Robot - Sass Utils

IMPORTANT

Install

Usage

Margin

Margin-x

Margin-y

Margin-top

Margin-bottom

Margin-left

Margin-right

Padding

Padding-x

Padding-y

Padding-top

Padding-bottom

Padding-left

Padding-right

Color

Simple

With themes

With scopes

With themes and scopes

Background-color

With themes

With scopes

With themes and scopes

Typography

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads