什么是 brink-sass？
brink-sass 是一个基于 Sass 语法的 CSS 框架，由于其使用 Sass 处理器编写，可读性高，易于使用和自定义。该框架提供了一系列实用且具有通用性的 CSS 样式，涵盖了按钮、形状、表格、表单等常用的 UI 组件。
与其他 CSS 框架不同的是，brink-sass 不提供已经设计好的 UI 组件，而是将 UI 组件的各种状态和变化拆分成了单独的 CSS 类名，以供开发者灵活地在项目中定制和拓展。
安装 brink-sass
在使用 brink-sass 之前，需要先安装 Node.js 和 npm。如果你已经安装好了，就可以通过以下命令在项目中安装 brink-sass：
npm install --save brink-sass
安装完毕后，在你的 Sass 文件中引入 brink-sass：
@import 'node_modules/brink-sass/brink-sass';
开始使用 brink-sass
样式类名列表
brink-sass 的样式类名非常丰富，覆盖了大部分常见的 UI 组件。下面列出了一部分常用的样式类名及其作用：
btn：基础按钮样式btn-primary：主题色按钮样式btn-outline：镂空按钮样式btn-disabled：禁用按钮样式btn-group：按钮组容器样式btn-group-justified：平均分配各个按钮的宽度form-control：表单字段样式input-group：表单控件容器样式input-group-addon：表单控件标签样式checkbox：复选框样式radio：单选框样式table：表格样式table-striped：斑马纹表格样式table-bordered：带边框表格样式panel：面板样式panel-heading：面板头部样式panel-body：面板主体样式modal：模态框样式modal-dialog：模态框容器样式modal-header：模态框头部样式modal-body：模态框主体样式modal-footer：模态框底部样式
将样式类名应用到 HTML 元素中
为了使用 brink-sass 提供的各种样式，需要在 HTML 元素中添加相应的类名。下面以按钮样式为例：
<button class="btn btn-primary">提交</button> <button class="btn btn-outline">重置</button> <button class="btn btn-disabled" disabled>禁用</button>
除了基础的 btn 样式外，btn-primary 和 btn-outline 分别表示主题色和镂空样式，btn-disabled 则表示禁用状态下的按钮样式。通过这些类名的组合，可以构建出非常多样化的按钮样式。
自定义样式
如果要修改 brink-sass 的样式，可以通过覆盖变量来实现。下面列出了一部分常用的变量：
$primary-color：主题色变量$secondary-color：辅助色变量$gray-base：灰色基准色变量$font-family-sans-serif：无衬线字体变量$font-size-base：基准字体大小变量$line-height-base：基准行高变量
例如，想要修改某个按钮的颜色，可以在 Sass 文件中添加以下内容：
.btn-custom {
@extend .btn;
background-color: $primary-color;
&:hover, &:active {
background-color: darken($primary-color, 10%);
}
}通过 @extend 继承 btn 样式的基础上，再添加自定义的背景色和鼠标悬停时的颜色。
总结
在本文中，我们介绍了如何通过 npm 包 brink-sass 使用 Sass 编写的 CSS 框架，并列举了一些常见的样式类名及其作用。同时，我们还介绍了如何自定义 brink-sass 的样式，帮助开发者灵活地定制和拓展样式。通过熟练掌握 brink-sass，可以大大提高前端开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50d8