Я только начал новый проект на базе 6.5.1 (последний на данный момент). Я установил через npm, и у меня все работает отлично, но у меня проблема с скомпилированным CSS, не использующим только некоторые переменные из файла _settings. Изменение основного цвета, глобального радиуса, количества столбцов сетки и семейств шрифтов в моем скомпилированном css не изменилось, но глобальная ширина и другие параметры работают, как и предполагалось. Может кто-нибудь помочь?
У меня есть мастер app.scss, который я импортирую _settings в первой строке, который является обычным файлом настроек Foundation, который сам включает в себя компоненты Foundation и т. Д. Я не могу понять, почему некоторые изменения переменных работают, в то время как другие не имеют никакого эффекта.
Кажется, у меня все нормально работает / компилируется, но на всякий случай ...
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;