扫一扫分享
Vanilla是一个 css 框架,旨在为创建响应式 Web 界面提供简单轻量级的解决方案。它旨在简单易用,不需要深入了解 CSS 或耗时的设置过程。
该框架的适度设计反映在名称“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"
手机预览