Question

请看下面的代码段中的当前情况，我希望自动混合颜色变量。

因此，如果我有深色后缀以获取深色变体，如果我有浅色后缀以获得深色变体...

假设我知道我的基础色，我想要的是每次插入我的基础色时在mixin中获得增量颜色变体，例如：

如果我的彩色背景是：dark-color-400，则获得框阴影顶部... 300和右侧/底部... 200。因此，每当我增加背景色时，我的边框就会获得更高的水准...

可以通过mixin来做到吗？或为此有任何sass函数？我对此很陌生，所以也可以自由地评判我。

$border-sm: 10px;

/**
 * Dark Theme Color Palette
*/

$dark-color-100: hsl(210, 20%, 16%);
$dark-color-200: lighten(desaturate($dark-color-100, 4%), 18%);
$dark-color-300: lighten(desaturate($dark-color-200, 5%), 25%);
$dark-color-400: lighten(desaturate($dark-color-300, 3%), 15%);
$dark-color-500: lighten(desaturate($dark-color-400, 2%), 6%);

/**
 * Light Theme Color Palette
*/

$light-color-100: hsl(210, 1%, 98%);
$light-color-200: darken(saturate($light-color-100, 2%), 4%);
$light-color-300: darken(saturate($light-color-200, 0%), 4%);
$light-color-400: darken(saturate($light-color-300, 3%), 5%);
$light-color-500: darken(saturate($light-color-400, 2%), 6%);


/**
 * Element Style Mixin
*/

@mixin box-shadow($params) {
  -webkit-box-shadow: $params;
  -moz-box-shadow: $params;
  box-shadow: $params;
}

/**
 * Params Configuration ( Inverted Color Suite )
*/

// Colour Mix for light surface

$box-shadows-inset-light: 
  -$border-sm 0px 0px 0px $light-color-300 inset,
    0px 0px -$border-sm 0px rgba($light-color-300, 0.7) inset, 
      0px $border-sm 0px 0px $light-color-100 inset;


// Color Mix for dark surface

$box-shadows-inset-dark:
  -$border-sm 0px 0px 0px $dark-color-100 inset,
    0px 0px -$border-sm 0px rgba($dark-color-100, 0.7) inset, 
      0px $border-sm 0px 0px $dark-color-300 inset;

使用Mixin和Sass获取变色

0 个答案: