Use Sass functions in color swatches in your living style guide

colors.lsg

@sass colors.scss

@style background-color: change-color($turquoise, $lightness: 98%)
@style color: $pink

# Colors

No you can use Sass functions in color swatches:

@colors {
  $pink       light($pink)       dark($pink)
  $turquoise  light($turquoise)  dark($turquoise)
}

Besides Sass variables and functions, you can also use plain CSS colors like `#ca1f70` or `red`.
Colors swatches are separated by one or more spaces.
[More information](https://github.com/livingstyleguide/livingstyleguide/tree/v2#colors)

colors.scss

$pink: #ca1f70;
$turquoise: #2ef1bd;

@function light($color) {
  @return change-color($color, $lightness: 90%);
}

@function dark($color) {
  @return change-color($color, $lightness: 30%);
}

compile.sh

# To generate your style guide:

gem install livingstyleguide -v 2.0.0.pre.3

livingstyleguide compile colors.lsg

# open colors.html

# or see the result online at http://hagenburger.net/DOWNLOADS/lsg-sass-color-swatches.html

# Follow @LSGorg on Twitter and watch livingstyleguide/livingstyleguide on GitHub for more updates!

You can see the result online at http://hagenburger.net/DOWNLOADS/lsg-sass-color-swatches.html

Follow @LSGorg on Twitter and watch livingstyleguide/livingstyleguide on GitHub for more updates!