Обнаружил, что foundation-docs импортирует (в node_modules) foundation-sites. И наоборот... А в gulpfile пропитсаны дополнительные пути для импорта scss файлов. Что конкретно импортируется и зачем? Здесь собрал вместе фрагменты файлов и распечатал структуру директорий.
In [ ]:
// Compiles documentation CSS
gulp.task('sass', function() {
return gulp.src('test/visual/docs.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: [
'scss',
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
]
}).on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('test/visual/_build'))
.pipe(browser.reload({ stream: true }));
});
Сначала ищем в подпапке scss, но если не найдем, то ищем в node_modules.
test/visual/docs.scss¶
В этом файле задан порядок импорта
In [ ]:
@import 'settings/settings'; // Из 'node_modules/foundation-sites/scss'
@import 'foundation'; // Из 'node_modules/foundation-sites/scss'
@import 'motion-ui'; // Из 'node_modules/motion-ui/src'
@include foundation-everything;
@include foundation-flex-classes;
@include foundation-range-input;
@include foundation-progress-element;
@include foundation-meter-element;
@include motion-ui-transitions;
@import 'foundation-docs'; // Из 'scss'
Здесь наоборот, сначала мы обращаемся к 'node_modules/foundation-sites/scss', а уж потом к scss. Очевидно, для того, чтобы (в случае дублирования) файлы из текущей директории записались в css после дефолтных.
В целом, порядок такой: Сначала дефолтные переменные 'settings/settings', потом главный дефолтный 'foundation', а потом к этому всему главный кастомный foundation-docs.scssА есть ли дублирование?
Посмотрим, что у нас в текущей директории проекта¶
In [ ]:
F:\foundation\foundation-docs\scss>tree /f
_anchor.scss
_announcement.scss
_banner.scss
_building-blocks.scss
_code.scss
_color-block.scss
_compatibility.scss
_footer.scss
_index.scss
_label.scss
_navigation.scss
_newsletter.scss
_notices.scss
_page.scss
_reference.scss
_search.scss
_studios-callout.scss
_toc.scss
_topbar.scss
_typography.scss
foundation-docs.scss
Подпапки отсутствуют
Компилятор SASS видит только один (последний) файл foundation-docs.scss
In [ ]:
# %load F:\foundation\foundation-docs\scss\foundation-docs.scss
@import 'typography';
@import 'footer';
@import 'navigation';
@import 'newsletter';
@import 'page';
@import 'anchor';
@import 'code';
@import 'reference';
@import 'color-block';
@import 'index';
@import 'building-blocks';
@import 'search';
@import 'compatibility';
@import 'notices';
@import 'topbar';
@import 'toc';
@import 'banner';
@import 'label';
@import 'studios-callout';
@import 'announcement';
.menu-group {
@include clearfix;
ul:first-child { float: left; }
ul:last-child { float: right; }
}
.sticky-mag {
background-color: white;
&.stuck-mag {
border-bottom: 2px solid #121212;
}
}
.expanded.row .row {
@include grid-row-nest;
}
.docs-contribute-menu {
@include breakpoint(small only) {
font-size: rem-calc(14);
}
i {
margin-right: 8px !important;
margin-top: -1px;
}
}
// .docs-component {
// .callout {
// border-left-width: 10px;
// &.primary { border-left-color: $primary-color; }
// &.warning { border-left-color: $warning-color; }
// &.alert { border-left-color: $alert-color; }
// }
// }
А далее посмотрим, что в дефолтных папках
node_modules/foundation-sites/scss/settings/_settings.scss¶
Точнее - F:\foundation\foundation-docs\node_modules\foundation-sites\scss\settings_settings.scss Здесь только переменные
In [ ]:
// 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. Close Button
// 15. Drilldown
// 16. Dropdown
// 17. Dropdown Menu
// 18. Flex Video
// 19. Forms
// 20. Label
// 21. Media Object
// 22. Menu
// 23. Meter
// 24. Off-canvas
// 25. Orbit
// 26. Pagination
// 27. Progress Bar
// 28. Reveal
// 29. Slider
// 30. Switch
// 31. Table
// 32. Tabs
// 33. Thumbnail
// 34. Title Bar
// 35. Tooltip
// 36. Top Bar
@import 'util/util';
In [ ]:
# %load F:\foundation\foundation-docs\node_modules\foundation-sites\scss\foundation.scss
/**
* Foundation for Sites by ZURB
* Version 6.2.3
* foundation.zurb.com
* Licensed under MIT Open Source
*/
// Sass utilities
@import 'util/util';
// Global variables and styles
@import 'global';
// Components
@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
@import 'components/dropdown-menu';
@import 'components/dropdown';
@import 'components/flex';
@import 'components/flex-video';
@import 'components/label';
@import 'components/media-object';
@import 'components/menu';
@import 'components/menu-icon';
@import 'components/off-canvas';
@import 'components/orbit';
@import 'components/pagination';
@import 'components/progress-bar';
@import 'components/reveal';
@import 'components/slider';
@import 'components/sticky';
@import 'components/switch';
@import 'components/table';
@import 'components/tabs';
@import 'components/title-bar';
@import 'components/top-bar';
@import 'components/thumbnail';
@import 'components/tooltip';
@mixin foundation-everything($flex: false) {
@if $flex {
$global-flexbox: true !global;
}
@include foundation-global-styles;
@if not $flex {
@include foundation-grid;
}
@else {
@include foundation-flex-grid;
}
@include foundation-typography;
@include foundation-forms;
@include foundation-button;
@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-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;
@if $flex {
@include foundation-flex-classes;
}
}
А вот структура папок и файлов foundation-sites¶
In [ ]:
F:\foundation\foundation-docs\node_modules\foundation-sites\scss>tree /f
F:.
│ _global.scss
│ foundation.scss
│
├───components
│ _menu-icon.scss
│ _accordion-menu.scss
│ _badge.scss
│ _breadcrumbs.scss
│ _button-group.scss
│ _button.scss
│ _callout.scss
│ _close-button.scss
│ _drilldown.scss
│ _dropdown-menu.scss
│ _dropdown.scss
│ _flex-video.scss
│ _flex.scss
│ _float.scss
│ _label.scss
│ _media-object.scss
│ _accordion.scss
│ _menu.scss
│ _off-canvas.scss
│ _orbit.scss
│ _pagination.scss
│ _progress-bar.scss
│ _reveal.scss
│ _slider.scss
│ _sticky.scss
│ _switch.scss
│ _table.scss
│ _tabs.scss
│ _thumbnail.scss
│ _title-bar.scss
│ _tooltip.scss
│ _top-bar.scss
│ _visibility.scss
│
├───forms
│ _label.scss
│ _checkbox.scss
│ _fieldset.scss
│ _forms.scss
│ _help-text.scss
│ _input-group.scss
│ _error.scss
│ _meter.scss
│ _progress.scss
│ _range.scss
│ _select.scss
│ _text.scss
│
├───grid
│ _classes.scss
│ _column.scss
│ _flex-grid.scss
│ _grid.scss
│ _gutter.scss
│ _layout.scss
│ _position.scss
│ _row.scss
│ _size.scss
│
├───settings
│ _settings.scss
│
├───typography
│ _alignment.scss
│ _base.scss
│ _helpers.scss
│ _print.scss
│ _typography.scss
│
└───util
_breakpoint.scss
_color.scss
_flex.scss
_mixins.scss
_selector.scss
_unit.scss
_util.scss
_value.scss
F:\foundation\foundation-docs\node_modules\foundation-sites\scss>
node_modules\motion-ui\src¶
In [ ]:
F:\foundation\foundation-docs\node_modules\motion-ui\src>tree /f
Структура папок тома HEXO
Серийный номер тома: 000000E6 AEB0:3E65
F:.
│ _classes.scss
│ _settings.scss
│ motion-ui.scss
│
├───effects
│ _fade.scss
│ _hinge.scss
│ _shake.scss
│ _slide.scss
│ _spin.scss
│ _wiggle.scss
│ _zoom.scss
│
├───transitions
│ _fade.scss
│ _hinge.scss
│ _slide.scss
│ _spin.scss
│ _zoom.scss
│
└───util
_animation.scss
_args.scss
_keyframe.scss
_selector.scss
_series.scss
_transition.scss
_unit.scss
F:\foundation\foundation-docs\node_modules\motion-ui\src>
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий