scss Sass：生成解耦颜色方案#sass

Posted 2021-05-18

.schemes {
  red-scheme: (red-lightest: #ffd8d8, red-lighter: #ffb2b2, red-light: #ff8c8c, red: #f66, red-dark: #bf4c4c, red-darker: #7f3333, red-darkest: #3f1919);
  button-scheme: (color: #fff, alt-color: #66f, active: #66f, alt-active: #fff);
}

strong {
  color: #7f3333;
}

.button {
  color: #fff;
  background: #66f;
}
.button:hover, .button:focus {
  color: #66f;
  background: #fff;
}

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

// Sass: Generating decoupled color schemes

// Helper functions
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
    @return mix(black, $color, $percentage);
}

// Toninzed color scheme (a presentational color scheme generator)
@function tone-schemer($name, $color, $lightenizer: 'tint', $darkenizer: 'shade') {
    $scheme: (
        #{$name}-lightest: call($lightenizer, $color, 75%),
        #{$name}-lighter : call($lightenizer, $color, 50%),
        #{$name}-light   : call($lightenizer, $color, 25%),
        #{$name}         : $color,
        #{$name}-dark    : call($darkenizer, $color, 25%),
        #{$name}-darker  : call($darkenizer, $color, 50%),
        #{$name}-darkest : call($darkenizer, $color, 75%),
    );

    @return $scheme;
}

// State color scheme generator (a semantic color scheme generator)
@function state-schemer($color, $alt-color) {
    $scheme: (
        color     : $color,
        alt-color : $alt-color,
        active    : $alt-color,
        alt-active: $color
    );

    @return $scheme;
}

// Scheme generator that calls a generator with the parameters
@function generate-scheme($generator, $parameters: ()) {
    $scheme: ();

    // do something (e.g. error handling)

    $scheme: call($generator, $parameters...);

    @return $scheme;
}

// Use cases
// Color scheme definitions
$red-scheme: generate-scheme(
  'tone-schemer',
  (
    name: 'red',
    color: #f66
  )
);

$button-scheme: generate-scheme(
  'state-schemer',
  (
    color    : #fff,
    alt-color: #66f
  )
);

// The result
.schemes {
  red-scheme   : inspect($red-scheme);
  button-scheme: inspect($button-scheme);
}

strong {
  color: map-get($red-scheme, 'red-darker');
}

@mixin button($color, $alt-color, $active, $alt-active) {
  color: $color;
  background: $alt-color;
  
  &:hover,
  &:focus {
    color: $active;
    background: $alt-active;
  }
}

.button {
  @include button($button-scheme...);
}