19

我已经设置了一个新项目来使用 Gulp 和 Sass 测试 Foundation 6，但它似乎根本无法编译。还有一篇接近这个主题的帖子，但我个人认为接受的答案不是正确的解决方案 - 因为它包含所有组件，实际上与 Zurb 建议的相反（请参阅此问题：https ://github.com /zurb/foundation-sites/issues/7537）。反正...

我从凉亭安装了 Foundation 6.1.1，并像这样添加了我的gulp-sass函数的路径gulpfile.js：

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/theme.scss')
        .pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(gulp.dest('css/'))
});

我theme.scss的如下：

//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';

body{
  background: red;
}

编译我的 scss 时，我没有收到任何错误，但输出theme.css如下所示：

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background: red;
}

所以看起来它正在访问文件，因为注释被输出，但它没有编译任何 Sass 导入foundation.scss。

4

2 回答 2

40

发生这种情况是因为在 Foundation 6 中@import foundation仅导入 Foundation mixin 以在 SCSS 中使用。它是这样设置的，这样您就可以使用组件的 Foundation mixin 而不会通过为该组件添加库存的 CSS 类来膨胀您的 CSS。

要导入所有Foundation CSS 类，您可以设置您的主app.scss文件（theme.scss在您的情况下），类似于：

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

@include foundation-everything;

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

要仅导入您需要的组件的单个 CSS 类，请设置您的app.scss文件（theme.scss在您的情况下），如下所示，并注释掉您不使用的组件。

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

@include foundation-global-styles; // Always include the global-styles
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@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-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@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 motion-ui-transitions;
@include motion-ui-animations;

您还需要从中复制_settings.scss文件bower_components/foundation-sites/scss/settings/并将其放置在项目scss目录中。

最后，确保在 sass 任务中包含这两个路径gulpfile.js：

  • bower_components/foundation-sites/scss
  • bower_components/motion-ui/src/
于 2015-12-30T23:03:26.710 回答
4

对于像我这样真正的 Zurb 新手来说，这就是我一直在寻找的答案（只是浪费了几个小时试图找到）。

当你安装 Foundation 6 时，你最终会得到一个像这样开头的 SCSS 文件：

// Dependencies
@import '../_vendor/normalize-scss/sass/normalize';  
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies'; 
@import '../_vendor/sassy-lists/stylesheets/helpers/true';
@import '../_vendor/sassy-lists/stylesheets/functions/purge';
@import '../_vendor/sassy-lists/stylesheets/functions/remove';
@import '../_vendor/sassy-lists/stylesheets/functions/replace';
@import '../_vendor/sassy-lists/stylesheets/functions/to-list';

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

这将运行 SCSS 文件中的代码以生成变量和混入。下面是一个变量的例子：

$dropdown-padding: 1rem !default;

这是一个混合的例子：

@mixin foundation-typography {
  @include foundation-typography-base;
  @include foundation-typography-helpers;
  @include foundation-text-alignment;
  @include foundation-print-styles;
}

将其编译成 CSS 将不会产生任何结果。您将拥有一组可以使用的变量，以及一组您可以调用的混入（基本上是函数），但在您这样做之前，您不会生成任何 CSS。所以接下来你可以做的就是在这一行评论：

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

但是，您仍然一无所获，因为这只是为变量设置默认值（因此设置字体、颜色、间距等）。你需要做的是创建一个新的 SCSS 文件（我们称之为 test.scss）来开始这样的事情：

@import 'foundation';

@include foundation-global-styles;
@include foundation-xy-grid-classes;

第一行包含引用所有其他 SCSS 文件的文件。

您可以在此处获取 Zurb 站点上可能包含的内容的列表。这是在运行一系列的混音。例如，这是一个名为“foundation-global-styles”的开头，您可以在 global.scss 文件中找到它：

@mixin foundation-global-styles {
  @include -zf-normalize;

  // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
  .foundation-mq {
    font-family: '#{-zf-bp-serialize($breakpoints)}';
  }

正是这些混合组件生成了 CSS。所有这一切可能对其他人来说都是显而易见的，但对我来说却不是！

于 2017-09-20T10:44:24.623 回答