专为 Rails 设计的前端模块化框架

Sass 变量

Tao UI 提供了一些全局的 Sass 变量,这些变量可以帮助我们统一 UI 标准,并且提供了一种自定义全局样式的途径。

你可以在 Tao UI 的仓库里找到这些 Sass 变量:

我们的项目应该基于这些 Sass 变量,定义自己的全局变量,比如:

// lib/assets/stylesheets/_globals.scss

@import 'tao/ui/globals';

$some-other-color: #xxxxxx;

其他样式文件应该 import 上面的全局变量:

// app/assets/stylesheets/desktop/employees/index_page.scss

@import 'globals';

.some-element {
  color: $some-other-color;
}

自定义

我们可以通过覆盖 Tao UI 默认的 Sass 变量来自定义一些 UI 样式,比如字体大小、按钮颜色等等。

你只需要把想覆盖的变量放到 lib/assets/stylesheets/tao/ui/_custom.scss 文件里,比如:

// lib/assets/stylesheets/tao/ui/_custom.scss

$ui-color: #xxxxxx;
$font-size: 0.875rem;

Tao UI 会自动 require 这个文件,并且覆盖默认的变量。