搜索无肩带 / 颜色
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); }