#4061: _import.utilities.scss

site/_sass/uikit/components/_import.utilities.scss

Path: site/_sass/uikit/components/_import.utilities.scss · Lines: 19 · Imports: 16 utility component files

Purpose: Core component import manifest for ALL utility classes — animation, width, text, column, cover, background, align, flex, margin, padding, position, transition, visibility, inverse, and print (loaded last). The CORE counterpart to the theme's _import.scss (#4052).

Source: GitHub

19 lines · 16 code · 2 comments · 1 blank

Commit	Message
`ac75fabf3`	2021-08-10 Github pages migrated to Asciidoc

Utilities MUST load last. This is by design — CSS utility classes (.uk-margin, .uk-text-center, .uk-hidden@m) need maximum specificity to override any component style. Loading them last ensures they always win in the cascade.

The 16 imports — ordered for specificity

@import "animation.scss";    // Fade, slide, scale keyframes
@import "width.scss";        // .uk-width-1-2, .uk-child-width-1-3
@import "text.scss";         // .uk-text-center, .uk-text-bold, .uk-text-muted
@import "column.scss";       // CSS multi-column layout
@import "cover.scss";        // Full-viewport background cover
@import "background.scss";   // .uk-background-primary, .uk-background-muted
@import "align.scss";        // Vertical align utilities
@import "utility.scss";      // Miscellaneous utilities (clearfix, etc.)
@import "flex.scss";         // Flex alignment — AFTER utility for override priority
@import "margin.scss";       // .uk-margin, .uk-margin-small, responsive margins
@import "padding.scss";      // .uk-padding, .uk-padding-small
@import "position.scss";     // .uk-position-top, .uk-position-center
@import "transition.scss";   // Transition utility classes
@import "visibility.scss";   // .uk-visible@s, .uk-hidden@m — responsive visibility
@import "inverse.scss";      // Dark mode color overrides
@import "print.scss";        // DEAD LAST — must override ALL screen styles

Import order is NOT alphabetical — it's intentional:

flex.scss after utility.scss (line 10): The comment says "After: Utility" — flex alignment classes need higher specificity than generic utilities. If both .uk-flex and a utility class set display, flex must win.
print.scss DEAD LAST (line 19): The comment "Need to be loaded last" is critical. Print styles use @media print queries that must override ALL screen styles. If loaded earlier, a later screen style rule with equal specificity would win. Loading last ensures print rules have cascade priority.
margin.scss and padding.scss before position.scss: Spacing utilities should be available before positioning utilities, which may reference margin/padding values.

How this differs from the theme _import.scss (#4052)

Aspect	Theme `_import.scss` (#4052)	Core `_import.utilities.scss` (this file)
What it imports	63 theme/*.scss files (visual styling)	16 components/*.scss files (functional CSS)
When loaded	During theme compilation — before core components	During core compilation — utilities loaded LAST among core
Purpose	"How elements LOOK" (colors, shadows, fonts)	"How elements BEHAVE" (layout, visibility, spacing)
Has variables section	Yes — imports variables.scss first	No — variables are already loaded by this point

The two manifests together cover all 63+ theme files AND all 16+ core utility files. The theme manifest is imported by uikit-theme.scss (#4090), the core manifest is imported by uikit.scss (#4089).