x
Home Metronic Hire Us Buy Now
logo The World’s #1 Bootstrap 4 HTML, Angular 10, React, VueJS & Laravel
Admin Dashboard Theme
PreviewFaqDocsVideosChangelogGitHubReviewsTutorials

 

SASS

Metronic uses SASS for handling the theme css efficiently.

Base

Base folder in [metronic]/theme/html/[demo]/src/sass/base/ contains global SASS functions and mixins for all demos and HTML, VueJS, React, Angular & Laravel versions.

Components

Components folder in [metronic]/theme/html/[demo]/src/sass/components/ contains custom Metronic components and Bootstrap components customizations. All components are globally available for all demos.

Both Metronic and Bootstrap components are customized in _variables.bootstrap.scss and _variables.custom.scss respectively.

Bootstrap Variables

In _variables.bootstrap.scss file Metronic deeply customizes the standard Bootstrap components by following the best practices explained in the official documentation.

Custom variables that used to extend Bootstrap components with new options are marked with Custom variable comment in _variables.bootstrap.scss

Custom Variables

Metronic's custom components related variables are set in _variables.custom.scss file.

Demo Variables

If you like to change the theme colors, the Bootstrap theme color, border radiuses, font family and other variables. We suggest using _variables.demo.scss file so you keep your own changes separated and future updates will be straightforward. All variable override in this file should be set without !important SASS attribute so the override works properly.

Layout

Layout folder in [metronic]/theme/html/[demo]/src/sass/layout/ contains the layout's markup and SASS variables files as explained in the below table(example given for demo1):

File Description
_variables.scss Variables used by Layout Partials. You can easily change Aside width, header height and other common properties.
Sample 
type: 'remote'
_init.scss Used by the main stylesheet style.scss to import demo related layout partials partials
_base.scss Normalizes and resets the document's CSS to make browsers render all elements more consistently and in line with modern standards.
_main.scss Defines Base Layout styles.
_header.scss Defines Header styles.
_header-menu.scss Defines Header Menu styles.
_header-topbar.scss Defines Header Topbar styles.
_header-mobile.scss Defines Header styles for mobile mode.
_subheader.scss Defines Subheader styles.
_aside.scss Defines Aside styles.
_brand.scss Defines Brand(Logo) styles.
_content.scss Defines Content styles.
_footer.scss Defines Footer styles.
_offcanvas.scss Defines Offcanvas(Notification Panel, User Profile Panel, etc) styles.

The above Layout Partials sass files are imported in [metronic]/theme/html/[demo]/src/sass/style.scss and compiled into the main style bundle [metronic]/theme/html/[demo]/dist/assets/css/style.bundle.css

Vendors

Vendors folder conains SASS files to overide and customize all 3rd-party plugins styles to provide unified look & feel for all 3rd-party plugins. The Vendors SASS files are imported in [metronic]/theme/html/[demo]/src/sass/style.scss and compiled into the main style bundle [metronic]/theme/html/[demo]/dist/assets/css/style.bundle.css

Pages

Unless Layout Partials, the Pages SASS Files are indivudally compiled into [metronic]/theme/html/[demo]/dist/assets/css/pages/ folder. The Pages CSS Files are included in HTML pages on demand.

Themes

Theme SASS files are used to generate additional CSS files to provide skin/theme support for the Layout Partials(e.g: Light Aside Theme, Dark Header Theme). The Theme SASS files are indivudally compiled into [metronic]/theme/html/[demo]/dist/assets/css/theme/ folder and included in HTML pages on demand. To see this in action check out Demo1 Layout Builder

Compilation

  • Metronic compiles Layout, Components(including the Bootstrap & Custom components), Vendors SASS files into the main the main style bundle: [metronic]/theme/html/[demo]/dist/assets/css/style.bundle.css.
  • The Pages and Themes SASS files are compiled separately into CSS folder: [metronic]/theme/html/[demo]/dist/assets/css/
  • All 3rd-party css files are bundled into the Plugins Bundle CSS file and globally included in all pages. [metronic]/theme/html/[demo]/dist/assets/plugins/global/plugins.bundle.css