sass-theme-manager v1.0.1

Sass Theme manager

This tiny sass helper offers a convenient way to manage your styleguide and themes using sass maps.

##Installation

  npm install sass-theme-manager --save-dev

Then include the index.scss file from the package.

##Usage Themes can be set per component basis, and globally for styleguide theme management.

###Locally

.my-component {
  @include theme((
    header: (
      color: #000
    )
  ));
  &.header {
    color: theme(header, color);
  }
}

###Globally

@include theme((
  headings: (
    h1: 2em,
    h2: 1.8em
  ),
  font-family: 'Roboto'
));

html, body {
  font-family: theme("global", font-family);
}

.my-component h1 {
  font-size: theme("global", headings, h1)
}

##Set theme styles To set a theme for a component, include theme mixin inside the component root. The component theme name is binded from the parent selector. Nested styles are supported.

my-component {
  @include theme($sassMap)
}

##Get theme styles

To get a style from the theme use the theme function. The theme name is implicitly binded from the scope, or explicitly set as a first parameter. Nested styles are supported.

my-component {
  @include theme((
    padding: 15px,
    general: (
      bg: #fff
    ),
    header: (
      color: blue,
      background-color: #fff,
      line-height: 1
    ),
    footer: (
      large-text: 16px
    )
  ));

  // current theme scope: "my-component".
  padding: theme(padding); //implicit from "my-component".
  // interpolates nested styles
  background-color: theme(general, bg);
  // explicitly set the theme name to get the styles from.
  background-color: theme("my-component", general, bg);

  .header {
    // current theme scope: "my-component".
    line-height: theme(header, line-height); //implicit from "my-component".
  }

  @at-root #{&}--footer {
    //current theme scope "". (since @at-root is used)
    font-size: theme("ys-card", footer, large-text); //must use explicit theme binding.
  }
}

##Global themes To set global themes, include theme mixin in the global scope.

@include theme((themeMap))

h1 {
  font-size: theme("global", h1, font-size);
}