将自定义样式添加到基础

Question

我正在使用基础构建我的第一个网站。我通过 npm 安装了基础。我认为最好保留基础样式然后覆盖需要调整的样式。基础样式将作为外部包含在 sass 编译作业（使用 gulp 或其他）期间包含。这是正确的方法吗？

标准基础安装（用于站点）带有许多我可能不需要的功能。我担心臃肿css。我该如何扔掉它们？

所以核心问题是 - 可以乱用基金会资源吗？

Answer 1

编辑核心文件不是良好做法，因此最好创建一个自定义文件样式表并将其包含在基础 CSS.

下方

Answer 2

请不要更改核心文件，当您将基础更新到较新版本时，您将丢失所有更改。

使用 Foundation 6 的 sass 版本，您可以选择要在 css 中输出的内容。例如，当使用基础 cli 时，您有一个 app.scss 文件，其中包含所有功能。您可以简单地将项目中不需要的功能注释掉。

当您注释掉某个功能时，您仍然可以包含带有 scss 混合的样式。

App.scss

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
// @include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
// @include foundation-progress-element;
// @include foundation-meter-element;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
// @include foundation-flex-classes;

@include motion-ui-transitions;
@include motion-ui-animations;

将自定义样式添加到基础

Adding custom styles to foundation

css

npm

zurb-foundation-6