颜色

优质

小牛编辑

175浏览

2023-12-01

用法

这是一个基于 material design 基础颜色的调色板。每一种颜色的定义有一个基本的颜色类和一个可选的减轻或变暗的类。

应用一个背景颜色只需要增加颜色的名称和颜色深浅度到元素的 class 属性中。这是一个卡片面板带一个 teal、lighten-2 类。

<div class="card-panel teal lighten-2">这是一个卡片面板带一个 teal lighten-2 类。</div>

设置文本颜色只要在颜色名称后面追加 -text，例如：这是一个卡片面板深蓝色文本。

<div class="card-panel">
<span class="blue-text text-darken-2">这是一个卡片面板深蓝色文本。</span>
</div>

对于背景颜色，你可以简单的应用这些颜色通过继承颜色类，如下：

.ilike-blue-container {
  @extend .blue, .lighten-4;
}

对于文本颜色，你可以简单的应用这些颜色通过继承文本颜色类，如下：

.ilike-blue-container {
  @extend .blue-text, .text-lighten-4;
}