搜索deviscoding / colors
DevIsCoding 组件中使用的 SASS 颜色函数、映射和 CSS。也可以在需要轻松管理颜色的任何 SASS 中非常有效地使用。
Replaces
- strapless/colors: ^1.0
README
DevIsCoding 组件中使用的 SASS 颜色函数和映射。也可以在需要轻松管理颜色的任何 SASS 中非常有效地使用。
之前被称为 StrapLess Colors。
可用的颜色映射
包含 'color-variables' 建立了三个颜色映射： $grays、$colors 和 $theme-colors。
这些颜色映射可以使用和操作各种包含的函数。
可用的函数
color($name) - 通过颜色名称从 $color 映射中检索颜色。
theme-color($name) - 通过上下文名称从 $theme-colors 映射中检索颜色。
gray($value) - 通过渐变值从 $grays 映射中检索阴影，50 - 900。
theme-colors-merge($new-map) - 将提供的 key: color 映射添加到主题颜色映射中。任何新的主题颜色都将添加到现有映射中。任何已存在的键将被您的新值覆盖。
colors-merge($new-map) - 将提供的 key: color 映射添加到颜色映射中。任何新的颜色都将添加到现有映射中。任何已存在的键将被您的新值覆盖。
grays-merge($new-map) - 将提供的 value: color 映射添加到灰色映射中。任何灰色值都将添加到现有映射中。任何已存在的键将被您的新值覆盖。
isLight($color-value) - 确定给定的颜色值是浅色还是深色。对于设置与背景颜色形成对比的前景色非常有用。
可用的混入
set-color($name,$color-value) - 通过 $name 名称添加或设置颜色到颜色映射中，值为 $color-value。任何具有相同名称的现有颜色将被覆盖。
set-theme-color($name,$color-value) - 通过 $name 名称添加或设置颜色到主题颜色映射中，值为 $color-value。任何具有相同名称的现有颜色将被覆盖。
set-gray($value,$color-value) - 通过 $value 名称添加或设置颜色到灰色阴影映射中，值为 $color-value。任何具有相同名称的现有颜色将被覆盖。
如何使用
为了有效使用，您应该在设置或使用颜色的任何变量之前导入 @import "colors";。这将设置基本颜色并允许您执行以下操作
- 使用
color、theme-color和gray函数使用颜色。 - 使用
set-*函数添加或替换颜色映射，无需担心!default。 - 在不擦除任何内容的情况下，将新颜色映射合并到现有映射中。
要设置单个颜色，可以使用以下混入
@include set-color(white,#fff);
要更新颜色映射，可以使用以下函数
$colors: colors-merge((white: #fff, black: #000));
要获取颜色值，可以使用以下函数
.selector { color: color(teal); }