向基础添加自定义样式

Question

我正在用地基建造我的第一个网站。我通过npm安装了地基。我相信这是一个很好的做法，让基金会风格，然后覆盖什么需要调整。在sass编译作业(使用gulp或其他什么)期间，基础样式将作为外部包含包括在内。这是正确的方式吗？

标准的基础安装(对于站点)提供了许多我可能不需要的特性。我担心css臃肿。我怎么把他们扔出去？

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

Answer 1

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

使用基金会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;

Answer 2

编辑核心文件是而不是a良好实践，所以最好创建一个自定义样式表，并将其包含在CSS基础下面。