Vanilla是一个 css 框架，旨在为创建响应式 Web 界面提供简单轻量级的解决方案。它旨在简单易用，不需要深入了解 CSS 或耗时的设置过程。
该框架的适度设计反映在名称“Vanilla”中。它提供了设计和元素的基本集合，例如网格、排版、表单、按钮和菜单。开发人员可以修改这些组件以满足其项目的独特要求，因为它们具有灵活性。
Vanilla 框架的好处：
- 简单性： Vanilla 提供了一系列易于更改的组件和样式。这使开发人员能够为他们的项目寻找简单且用户友好的解决方案。
- 灵活性：香草不会强加严格的设计模式或风格。相反，它提供了一套通用的部件和设计，易于定制以满足各种应用和设计要求。
- 易于使用和学习： Vanilla 是开发人员和初学者的绝佳选择，他们希望快速制作项目原型而不需要在 CSS 上投入大量时间。
- 社区支持： Vanilla 拥有一个不断壮大的开发者社区，他们为框架的开发做出贡献，并通过论坛和在线资源提供帮助。
- 可扩展性： Vanilla 可以处理任何规模的项目，从小型网站到大型在线应用程序。其模块化设计允许开发人员根据需要添加或删除组件，使其成为适用于各种任务的灵活且适应性强的解决方案。
安装
要使用 Sass 进行设置，请将sass和vanilla-framework包添加到您的项目依赖项中：
yarn add sass vanilla-framework
在您的 中构建 CSS 的脚本中package.json，您应该node_modules在查找@imports. 在此示例中，我们调用了构建脚本"build-css"：
"build-css": "sass -w --load-path=node_modules src:dist --style=compressed"
创建一个文件夹src/，在里面创建一个名为的文件style.scss并导入 Vanilla：
// Import the theme
@import 'vanilla-framework';
@include vanilla;
// Optionally override some settings
$color-brand: #ffffff;
// Add theme if applicable
如果您不需要整个框架，您可以只需要@include特定部分- 例如@include vf-b-forms。现在运行yarn build-css，这会将src/文件夹中的所有 Sass 文件转换为dist/文件夹中的 CSS。要监视 Sass 文件中的更改，请将以下脚本添加到您的package.json：
"watch-css": "yarn build-css && sass --load-path=node_modules -w src:dist --style=compressed"
链接: https://fly63.com/nav/4043
