【问题标题】:Adding custom styles to foundation将自定义样式添加到基础
【发布时间】:2016-07-09 08:43:51
【问题描述】:

我正在使用基础构建我的第一个网站。我通过 npm 安装了基础。我相信最好的做法是不理会基础样式,然后覆盖需要调整的内容。基础样式将在 sass 编译作业(使用 gulp 或其他)期间作为外部包含包含在内。这是正确的方法吗?

标准基础安装(用于网站)带有许多我可能不需要的功能。我担心臃肿的CSS。我该如何扔掉它们?

所以核心问题是 - 搞乱基础资源可以吗?

【问题讨论】:

    标签: css npm zurb-foundation-6


    【解决方案1】:

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

    使用 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;
    

    【讨论】:

      【解决方案2】:

      编辑 核心文件 不是一种良好做法,因此最好创建自定义样式表并将其包含在基础 CSS 之下。 p>

      【讨论】:

      • 我同意。我只是不确定,因为基金会网站允许您预先配置您的组件,而根 SCSS 文件只是为这些组件做一个导入列表。所以我认为更改该文件也许可以,因为他们也这样做了?或者可能不导入根 SCSS 并自己直接导入组件?
      • 手动导入组件不同于编辑核心文件。只要您没有遇到错误,对文件所做的更改就不会产生问题。即使在导入组件时,您也需要确保一切正常,否则将是浪费时间
      猜你喜欢
      • 2015-05-28
      • 1970-01-01
      • 1970-01-01
      • 2011-01-06
      • 2021-06-12
      • 1970-01-01
      • 2016-03-14
      • 2021-09-25
      • 2011-09-20
      相关资源
      最近更新 更多