巅峰霸主 > 在线帮助文档 > bootstrap4.5文档 > sass colors

bootstrap sass All colors颜色说明

时间:2020-04-06 14:03:22  来源:巅峰霸主  作者:烈火大地 点击:
摘要:Bootstrap 4中可用的所有颜色都可以作为Sass变量和scss/_variables.scss文件中的Sass映射使用。在后续的次要版本中将对此进行扩展以添加其他阴影,就像我们已经包含的灰度调色板一样……

颜色

Bootstrap的许多各种组件和实用程序都是通过Sass映射中定义的一系列颜色构建的。可以在Sass中循环映射此地图,以快速生成一系列规则集。

所有颜色

Bootstrap 4中可用的所有颜色都可以作为Sass变量和scss/_variables.scss文件中的Sass映射使用。在后续的次要版本中将对此进行扩展以添加其他阴影,就像我们已经包含的灰度调色板一样。

image.png

您可以在Sass中使用这些方法:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

颜色实用程序类也可用于设置color和background-color。

将来,我们将致力于为每种颜色的阴影提供Sass贴图和变量,就像我们对下面的灰度颜色所做的那样。

主题颜色

我们使用所有颜色的子集来创建较小的调色板以生成配色方案,也可以在Bootstrap scss/_variables.scss文件中将其作为Sass变量和Sass映射使用。

image.png

grays

广泛的灰色变量集和Sass映射,可在scss/_variables.scss整个项目中使用一致的灰色阴影。请注意,这些是“冷灰色”,趋向于微妙的蓝色调,而不是中性灰色。

image.png

在中scss/_variables.scss,您会找到Bootstrap的颜色变量和Sass贴图。这是$colorsSass地图的示例:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

在地图中添加,删除或修改值,以更新它们在许多其他组件中的使用方式。不幸的是,此时,并非每个组件都使用此Sass映射。未来的更新将努力对此进行改进。在此之前,请计划使用${color}变量和此Sass映射。

组件

Bootstrap的许多组件和实用程序都是通过@each迭代Sass映射的循环构建的。这对于通过我们$theme-colors生成组件的变体并为每个断点创建响应变体特别有用。自定义这些Sass映射并重新编译时,您将自动看到这些循环中反映出的更改。

修饰符

Bootstrap的许多组件都是使用基本修饰符类方法构建的。这意味着大部分样式都包含在基类(例如.btn)中,而样式变体则限于修饰符类(例如.btn-danger)。这些修饰符类是从$theme-colors地图构建的,用于自定义修饰符类的数量和名称。

这是两个示例,这些示例说明了我们如何遍历$theme-colors地图以生成.alert组件和所有.bg-*后台实用程序的修改器。

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

响应式

这些Sass循环也不限于颜色图。您还可以生成组件或实用程序的响应式变体。以我们的响应式文本对齐实用程序为例@each,在该实用程序中,我们将$grid-breakpointsSass映射的循环与媒体查询include 混合在一起。

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

如果您需要修改$grid-breakpoints,所做的更改将应用于在该地图上进行迭代的所有循环。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部