Little Miss Robot - Sass system

This package contains a system that lets you manage a couple of fundamental design elements: color, spacing, typography and breakpoints. This package is depended on different partial packages providing their respective functionality. This README is meant for the dev team and should not be published!

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!

Partials

This system is actually a combination of different standalone @littlemissrobot libraries. Each library has their own role and can be accessed through this system. This system provides shortcuts to the main functionality of these libraries.

These libraries are used internally by sass-system:

• @littlemissrobot/sass-functions
• @littlemissrobot/sass-mixins
• @littlemissrobot/sass-spacing
• @littlemissrobot/sass-breakpoints
• @littlemissrobot/sass-colors
• @littlemissrobot/sass-typography

Install

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

Usage

1. Import the library from the node_modules folder:

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-system";

2. Pass the configuration to the library:

// Library
@use "@littlemissrobot/sass-system" with (
  $spacing: (
    baseline: 8px,
  ),
  $breakpoints: (
    viewports: (
      vp-3: 320px,
      vp-4: 480px,
      vp-7: 720px,
      vp-9: 992px,
      vp-12: 1200px
    )
  ),
  $colors: (
    themes: (),
    scopes: (),
    palette: ()
  ),
  $typography: (
    fonts: (),
    styles: ()
  ),
);

Forwards

Each library used by sass-system is accessible with their own keyword:

• @littlemissrobot/sass-colors: colors_
• @littlemissrobot/sass-typography: typography_
• @littlemissrobot/sass-spacing: spacing_
• @littlemissrobot/sass-breakpoints: breakpoints_
• @littlemissrobot/sass-functions: functions_
• @littlemissrobot/sass-mixins: mixins_

@use "@littlemissrobot/sass-system" as _system;

body {
  @include _system.typography_set(p);
}

Shortcuts

The library makes it easy to access the main functionality of all these packages. They are all combined in one package. Their functionality is provided as shortcuts, which can be accessed by the @use statement. For example:

@use "@littlemissrobot/sass-system" as _system;

body {
  color: _system.color("brand");
}

name	target	library
space	step	@littlemissrobot/sass-spacing
at	at	@littlemissrobot/sass-breakpoints
to	to	@littlemissrobot/sass-breakpoints
between	between	@littlemissrobot/sass-breakpoints
color	set	@littlemissrobot/sass-colors
typo	set	@littlemissrobot/sass-typography
rem	rem	@littlemissrobot/sass-functions
convert	convert	@littlemissrobot/sass-functions

Mixins

generate-default

This generator requires:

• default: a boolean to generate classes without breakpoint suffixes
• at: a list of breakpoint keys to generate classes with breakpoint suffixes above the passed breakpoints
• to: a list of breakpoint keys to generate classes with breakpoint suffixes below the passed breakpoints

@use "@littlemissrobot/sass-system" as _system;

$flex: (
  default: true,
);

.flex {
  @include _system.generate-default_base($flex) {
    display: flex;
  }
}

// Generates:
.flex {
  display: flex;
}

@use "@littlemissrobot/sass-system" as _system;

$flex: (
  at: (
    "vp-3",
    "vp-7",
  ),
);

.flex {
  @include _system.generate-default_at($flex) {
    display: flex;
  }
}

// Generates:
@media screen and (min-width: 22.5625em) {
  .flex\@vp-3 {
    display: flex;
  }
}

@media screen and (min-width: 45.0625em) {
  .flex\@vp-7 {
    display: flex;
  }
}

@use "@littlemissrobot/sass-system" as _system;

$flex: (
  to: (
    "vp-3",
    "vp-7",
  ),
);

.flex {
  @include _system.generate-default_to($flex) {
    display: flex;
  }
}

// Generates:
@media screen and (max-width: 45.0625em) {
  .flex\@to\:vp-7 {
    display: flex;
  }
}

@media screen and (max-width: 22.5625em) {
  .flex\@to\:vp-3 {
    display: flex;
  }
}

@use "@littlemissrobot/sass-system" as _system;

$flex: (
  default: true,
  at: (
    "vp-3",
    "vp-7",
  ),
  to: (
    "vp-3",
    "vp-7",
  ),
);

.flex {
  @include _system.generate-default($flex) {
    display: flex;
  }
}

// Generates the base, at and to results in one go

generate-value

This generator requires:

• value: a list of items, the item can be anything
• at: a map of breakpoint keys to generate classes with breakpoint suffixes above the passed breakpoints. Each key of that breakpoint is the same list passed to value.
• to: a map of breakpoint keys to generate classes with breakpoint suffixes below the passed breakpoints. Each key of that breakpoint is the same list passed to value.

@use "@littlemissrobot/sass-system" as _system;

$margin: (
  value: (
    10px,
    20px,
    30px,
  ),
);

.margin {
  @include _system.generate-value_base($margin) using ($item) {
    margin: $item;
  }
}

// Generates:
.margin {
  margin: 10px;
}

.margin {
  margin: 20px;
}

.margin {
  margin: 30px;
}

@use "@littlemissrobot/sass-system" as _system;

$margin: (
  at: (
    vp-7: (
      10px,
      20px,
      30px,
    ),
  ),
);

.margin {
  @include _system.generate-value_at($margin) using ($item) {
    margin: $item;
  }
}

// Generates:
@media screen and (min-width: 45.0625em) {
  .margin\@vp-7 {
    margin: 10px;
  }
}

@media screen and (min-width: 45.0625em) {
  .margin\@vp-7 {
    margin: 20px;
  }
}

@media screen and (min-width: 45.0625em) {
  .margin\@vp-7 {
    margin: 30px;
  }
}

@use "@littlemissrobot/sass-system" as _system;

$margin: (
  to: (
    vp-7: (
      10px,
      20px,
      30px,
    ),
  ),
);

.margin {
  @include _system.generate-value_to($margin) using ($item) {
    margin: $item;
  }
}

// Generates:
@media screen and (min-width: 45.0625em) {
  .margin\@to\:vp-7 {
    margin: 10px;
  }
}

@media screen and (min-width: 45.0625em) {
  .margin\@to\:vp-7 {
    margin: 20px;
  }
}

@media screen and (min-width: 45.0625em) {
  .margin\@to\:vp-7 {
    margin: 30px;
  }
}

@use "@littlemissrobot/sass-system" as _system;

$margin: (
  value: (
    10px,
    20px,
    30px,
  ),
  at: (
    vp-7: (
      10px,
      20px,
      30px,
    ),
  ),
  to: (
    vp-7: (
      10px,
      20px,
      30px,
    ),
  ),
);

.margin {
  @include _system.generators-value($margin) using ($item) {
    margin: $item;
  }
}

// Generates the base, at and to results in one go

generate-default-with-breakpoints

This generator requires:

• default: a boolean to generate classes without breakpoint suffixes
• at: a list of breakpoint keys to generate classes with breakpoint suffixes above the passed breakpoints
• to: a list of breakpoint keys to generate classes with breakpoint suffixes below the passed breakpoints

As a second parameter, it requires to pass a settings map. Each key should represent a breakpoint and should indicate what changes at each breakpoint. The mixin will generate the correct at and to breakpoints and css until the passed breakpoint is reached.

Use the default key to indicate as fallback.

@use "@littlemissrobot/sass-system" as _system;

$settings: (
  default: 5px,
  vp-3: 10px,
  vp-7: 20px,
);

$margin: (
  default: true,
);

.test {
  @include _system.generate-default-with-breakpoints_base($margin, $settings) using ($item) {
    margin: $item;
  }
}

// Generates:
.test {
  margin: 5px;
}

@media screen and (min-width: 22.5625em) {
  .test {
    margin: 10px;
  }
}

@media screen and (min-width: 45.0625em) {
  .test {
    margin: 20px;
  }
}

@use "@littlemissrobot/sass-system" as _system;

$settings: (
  default: 5px,
  vp-3: 10px,
  vp-7: 20px,
)

$margin: (
  at: ("vp-7",),
);

.test {
  @include _system.generate-default-with-breakpoints_at($margin, $settings) using ($item) {
    margin: $item;
  }
}

// Generates:
@media screen and (min-width: 45.0625em) {
  .test\@vp-7 {
    margin: 20px;
  }
}

@use "@littlemissrobot/sass-system" as _system;

$settings: (
  default: 5px,
  vp-3: 10px,
  vp-7: 20px,
)

$margin: (
  to: ("vp-7",),
);

.test {
  @include _system.generate-default-with-breakpoints_to($margin, $settings) using ($item) {
    margin: $item;
  }
}

// Generates:
@media screen and (max-width: 22.5625em) {
  .test\@to\:vp-7 {
    margin: 5px;
  }
}

@media screen and (max-width: 45.0625em) {
  .test\@to\:vp-7 {
    margin: 10px;
  }
}

@use "@littlemissrobot/sass-system" as _system;

$settings: (
  default: 5px,
  vp-3: 10px,
  vp-7: 20px,
)

$margin: (
  default: true,
  at: ("vp-7",),
  to: ("vp-7",),
);

.test {
  @include _system.generate-default-with-breakpoints($margin, $settings) using ($item) {
    margin: $item;
  }
}

// Generates the base, at and to results in one go