Menu icon Foundation

My Posts

No Content

My Comments

Bob Sutton commented on Luca Bianco's post over 3 years

This may be too late to help the OP but I haven't seen it documented, so for what it's worth, pay attention to the order that your imported CSS (e.g., _custom.scss) gets compiled into app.css. Out of the box, SASS constructs that file from IMPORTed partials and INCLUDEd Foundation components, many of which may govern an element's properties. Try placing your @import for any local stylesheet partials at the END of the stack in app.scss rather than at the top where @import _settings appears, like this:
@charset 'utf-8';

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

@include foundation-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-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;

@import 'custom';

If I @import 'custom' before the inclusions, foundation-global-styles will clobber my stuff before the browser ever sees it. 
 

Posts Followed

  • 3
    Replies
  • Yeti Launch not Compile scss

    By Luca Bianco

    yeti launch

    Hello, I have just install the new Yeti Launch, i create a new project, i have test to insert in app.scss many class styles and when i save the Yeti Launch says "$ [15:59:18] Starting 'sass'... $ [15:59:18] Finished 'sass' after 3.57 ms" But in a... (continued)

    Last Reply by Bob Sutton over 3 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Luca Bianco's post over 3 years

This may be too late to help the OP but I haven't seen it documented, so for what it's worth, pay attention to the order that your imported CSS (e.g., _custom.scss) gets compiled into app.css. Out of the box, SASS constructs that file from IMPORTed partials and INCLUDEd Foundation components, many of which may govern an element's properties. Try placing your @import for any local stylesheet partials at the END of the stack in app.scss rather than at the top where @import _settings appears, like this:
@charset 'utf-8';

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

@include foundation-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-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;

@import 'custom';

If I @import 'custom' before the inclusions, foundation-global-styles will clobber my stuff before the browser ever sees it. 
 

Posts Followed


Following

  • No Content

Followers

  • No Content