css - 某些 SASS 设置似乎不起作用

Question

我刚刚在 Foundation 6.5.1(目前最新)上开始了一个新元素。我通过 npm 安装，一切正常，但我遇到了编译 CSS 的问题，它没有使用 _settings 文件中的 just some 变量。更改原色、全局半径、网格列数和字体系列在我编译的 css 中没有更改，但全局宽度和其他设置似乎按预期工作。有人可以帮忙吗？

我有一个主 app.scss，我在第一行导入了 _settings，这是正常的 Foundation 设置文件，它本身包含基础组件等。我不明白为什么某些变量更改有效而其他变量无效。

我的 gulp 任务似乎工作/编译正常，但这里只是为了以防万一...

var gulp = require('gulp');
var $   = require('gulp-load-plugins')();

var sassPaths = [
  'assets/scss/*', 
  'node_modules/foundation-sites/scss', 
];

gulp.task('sass', function() {
  return gulp.src('assets/scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'compressed' // if css compressed **file size**
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('assets/css'));
});

gulp.task('default', gulp.parallel(['sass']));

gulp.task('watch', function() {
  gulp.watch(sassPaths, gulp.parallel(['sass']));
});

这是我自己的 app.scss...

@import '_settings';

// App variables
// colors
$white:			#fff; 
$purple:		#712774;
$green: 		#43a08e;
$light-green: 	#afddda;


// App styles
body { 
	background-color: $light-green; 
	font-weight: normal; }
	body.splash { background-color: $white; }
.container { @include xy-grid-container; }

//.button { background-color: $primary-color; }

// Sticky Masthead 
// https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html
.masthead { 
	@include xy-grid-container; 
	position: relative; 
	outline:1px solid red; }
$sticky-shrinknav-menu-height: rem-calc(60);
$sticky-shrinknav-hero-height: 200px;

body { padding-top: $sticky-shrinknav-hero-height + 0px; }

.sticky-shrinknav-menu {
	@include horizontal-center; 
	bottom: 0; 
	height: $sticky-shrinknav-menu-height; 
	line-height: $sticky-shrinknav-menu-height; 
	width: 100%; 
	background-color: #b8d6d3; //rgba($primary-color, 0.1); 
	transition: all 0.5s ease; 
	display: flex;
	justify-content: center;
	align-items: center;
	li {
		border-radius: 2px;
		transition: all 0.3s ease;
		&:hover { box-shadow: 0 0 0 1px $white; }
	}

	a { color: $white; }
	}

.sticky-shrinknav-header-title {
	transition: all 0.3s ease;
	position: relative;
	transform: translateY(-$sticky-shrinknav-menu-height/2);
	margin-bottom: 0;
	color: $green; }

	.sticky-shrinknav-header-title .container { 
		height: $sticky-shrinknav-hero-height; 
		padding-top: 3rem; outline: 1px solid red; }

.sticky-shrinknav-header {
	//@include xy-grid-container; 
	width: 100%; 
	//max-width: $global-width; 
	height: $sticky-shrinknav-hero-height;
	//display: flex;
	align-items: center;
	justify-content: center;
	background-color: $white; //lighten($primary-color, 10%);
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	transition: all 0.5s ease; }

body.sticky-shrinknav-wrapper {
	padding-top: 130px;
	.sticky-shrinknav-header {
		height: $sticky-shrinknav-menu-height;
		background-color: $white; //rgba($primary-color, 0.9);

		.sticky-shrinknav-header-title {
			transform: scale(0);
			transition: all 0.3s ease; }
		}
	}
// End Sticky Masthead

.hero { background-color: $white; }
	
.footer-actions { 
	background-color: $white; }
	.footer-actions .footer-action-block {
		text-align: center; 
		@include xy-cell(50%);
		@include breakpoint(medium) {
			@include xy-cell(25%);
		}
	}
		.footer-actions .footer-action-block a { 
			display: block; 
			width: 100%; 
			height: 100%; 
			outline: 1px solid $white; }
.footer-donation-info { 
	background-color: $white; 
	text-align: center; 
	padding-top: 2rem; 
	padding-bottom: 2rem; }
.footer-site-legal { 
	color: $purple;
	background-color: $light-green; 
	font-size: 0.7rem; }

// Coming soon splash page
.coming-soon {
	padding-top: 2rem;
	@include breakpoint(medium) {
		padding-top: 10rem; 
	}
	text-align: center; }
	.coming-soon .grid-y { background-color: $white; }

	.coming-soon h1 img {
		margin-bottom: 0.8rem; 
		@include breakpoint(medium) {
			max-width: 435px; 
			margin-bottom: 2.6rem; 
		}
	}
	.coming-soon h2 { 
		color: $purple; 
		margin-bottom: 4rem; 
		text-transform: uppercase; }
		.coming-soon h2 img { max-width: 60px; }
		.coming-soon h2 img.diaper-l { margin-right: 1rem; }
		.coming-soon h2 img.diaper-r { margin-left: 1rem; }
	.coming-soon .contact { 
		text-align: left; 
		color: $purple; 
		padding-left: 1rem; 
		border-left: 2px solid $purple; }
		.coming-soon .contact h3 {
			font-size: 1.1rem;
			color: $green; 
			text-transform: uppercase; }
	.coming-soon .donations { 
		text-align: left; 
		color: $purple; 
		padding-left: 1rem; 
		border-left: 2px solid $purple; }
		.coming-soon .donations h3 {
			font-size: 1.1rem;
			color: $green; 
			text-transform: uppercase; }
	.coming-soon .mission { 
		color: $purple; 
		margin-top: 1rem; 
		padding: 1rem; 
		text-align: left;
		background-image: url(/assets/img/coming-soon-mission-gradient.png); 
		background-repeat: repeat-y; 
	background-size: 100%; }
		.coming-soon .mission p { margin-bottom: 0; }
		.coming-soon .mission strong { 
			color: $green; 
			text-transform: uppercase; }

	// Misc
.text-purple { color: $purple; }
.text-green { color: $green; }
.bg-white { background-color: $white; }
.bg-purple { background-color: $purple; }

这是我创建的 _settings.scss 文件的顶部(遇到发布限制，因此无法包含整个文件)...

@import 'foundation';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
//@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
//@include foundation-pagination;
@include foundation-tooltip;

// Containers
//@include foundation-accordion;
//@include foundation-media-object;
//@include foundation-orbit;
@include foundation-responsive-embed;
//@include foundation-tabs;
//@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
//@include foundation-menu-icon;
//@include foundation-accordion-menu;
//@include foundation-drilldown-menu;
//@include foundation-dropdown-menu;

// Layout components
//@include foundation-off-canvas;
@include foundation-reveal;
//@include foundation-sticky;
@include foundation-title-bar;
//@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

//  Foundation for Sites Settings
//  -----------------------------
//
//  Table of Contents:
//
//   1. Global
//   2. Breakpoints
//   3. The Grid
//   4. Base Typography
//   5. Typography Helpers
//   6. Abide
//   7. Accordion
//   8. Accordion Menu
//   9. Badge
//  10. Breadcrumbs
//  11. Button
//  12. Button Group
//  13. Callout
//  14. Card
//  15. Close Button
//  16. Drilldown
//  17. Dropdown
//  18. Dropdown Menu
//  19. Flexbox Utilities
//  20. Forms
//  21. Label
//  22. Media Object
//  23. Menu
//  24. Meter
//  25. Off-canvas
//  26. Orbit
//  27. Pagination
//  28. Progress Bar
//  29. Prototype Arrow
//  30. Prototype Border-Box
//  31. Prototype Border-None
//  32. Prototype Bordered
//  33. Prototype Display
//  34. Prototype Font-Styling
//  35. Prototype List-Style-Type
//  36. Prototype Overflow
//  37. Prototype Position
//  38. Prototype Rounded
//  39. Prototype Separator
//  40. Prototype Shadow
//  41. Prototype Sizing
//  42. Prototype Spacing
//  43. Prototype Text-Decoration
//  44. Prototype Text-Transformation
//  45. Prototype Text-Utilities
//  46. Responsive Embed
//  47. Reveal
//  48. Slider
//  49. Switch
//  50. Table
//  51. Tabs
//  52. Thumbnail
//  53. Title Bar
//  54. Tooltip
//  55. Top Bar
//  56. Xy Grid

@import 'util/util';
//@import 'node_modules/foundation-sites/scss/util/util'; 

// 1. Global
// ---------

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.4;
$foundation-palette: (
  primary: #712774, //#1779ba,
  secondary: #43a08e, //#767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: upgrade, sans-serif; //'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 10px !important;
$global-menu-padding: 0.7rem 1rem;
$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
$global-flexbox: true;
$global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;

@include add-foundation-colors;
$print-hrefs: true;

Answer 1

我通过引用另一个 Foundation 元素发现了这个问题。这完全取决于订单和我在哪里进行进口。我将基础组件从我的设置中移到了我的 app.scss 的顶部，它按预期工作。