In this tutorial, we will be discussing on our default HTML version SASS structure. Our default version consists of multiple demo folders; however, each demo is considered independent from each other. Therefore, each demo will have its own SASS folder where you can customize or extend.
Our SASS folder is located in /theme/html/<demo>/src/sass/
There are 5 main key points within our SASS structure:
- Variable configurations
- Layouts
- Components
- Pages
- Vendors
We have created a very flexible and efficient file structure framework to enable all our users to be customize and extend Metronic’s styling to fit any project requirements.
All of Metronic’s SASS initialization is located within our _init.scss and style.scss files. If your project needs additional custom scss files to be imported, you can just add your scss path in either of these 2 files. However, we recommend that you add it at the bottom of the style.scss file.
You can add your own scss file by first creating the file somewhere within your project and then adding this line of code at the bottom each section of our style.scss file.
@import “<your scss file path>”;When viewing some of our sass files, you may come across some custom scss functions. You will most likely see our get() function the most. Here’s an example of a get() function:
get($aside-config, base, width);How this read is, the function will get the value set within a variable called $aside-config with a node or parameter called base -> width.
Hence, the value our get() function is calling is located within the _variables.scss file of our layout that’s pointing to the value of 265px:
// Aside
$aside-config: (
// Aside
base: (
width: 265px, <-- value returned
minimized-width: 70px,
zindex: 98,
scrollbar-width: 4px
),
// Offcanvas Mobile
offcanvas-mobile: (
width: 275px,
zindex: 1001,
bg-color: #ffffff,
shadow: 0px 1px 9px -3px rgba(0,0,0,0.75),
overlay-bg-color: rgba(#000000, 0.1)
)
) !default;You can locate all variable files within each main scss folder such as, “components”, “layout”, “pages, or “vendors”. Our variable files will usually be named as _variables.
Variable configurations
Most of Metronic’s general styling can be found within our variable files. These variable files consist of key variables such as font sizes, font weights, colors, padding or margins sizes and many more.
These key variables are primarily used for global stylings. So, if your project needs to customize a certain style globally, your first point to look for will be within one of our variable files.
Layouts
Our layout sass folder is located at /themes/html/<demo>/src/sass/layout
Within this folder, we have all the necessary sass files that controls the layout of your project, or in this case, the selected demo.
In essence, if you need to modify the aside menu with demo 1, then you’ll be looking at _aside.scss or if you need to modify the header, then _header.scss and so on.
Components
Components are shared element across all pages within Metronic such as, accordions, buttons, cards, forms, etc. You can locate our components sass within /themes/html/<demo>/src/sass/components
In our components folder, we have 3 variable files:
_variable.bootstrap.scss_variable.custom.scss_variable.demo.scss
Bootstrap variables
In our Bootstrap variables file, we define and override Bootstrap’s default variables to fit the look and feel of each of our demo. We recommend that you use this file as a reference only and not to modify any of the variables defined here.
Custom variables
Our Custom variables file consists of all the values used by our custom components that were created. Values such as, heights and widths, icon sizes, SVG sizes, checkbox configurations, etc. Similar with our Bootstrap variables, we do not recommend modifying anything within this file.
Demo variables
All variables defined within our Demo variables file will be used to override any of our defined values within the Bootstrap and Custom variable files. Therefore, if you want to customize a certain color, we recommend that you copy the variable name from _variables.bootstrap.scss into _variables.demo.scss and then replace the value with the value your project requires.
For example, if you want to change the $success color variable. First, locate the color within _variables.bootstrap.scss, copy the variable and paste it in _variable.demo.scss, and replace it the color values and it should look something like this:
// Success colors
$success: #1BC5BD; // Bootstrap variable
$success-hover: #0BB7AF; // Custom variable
$success-light: #C9F7F5; // Custom variable
$success-inverse: #FFFFFF; // Custom variablePlease remember to remove the !default flag with the Demo variables file.
Pages
Pages sass files are custom stylings for specific standalone pages within Metronic that does not quite fit within a component or have components within itself. Such as our error or login pages.
Our pages do not have a variables file since each scss file is considered an independent styling file. If you need to modify any of these, you can do so directly within the corresponding file. For example, if you need to modify the font size within our Error 3 page, you can modify our error-3.scss file directly.
Vendors
All Metronic 3rd party plugins that were customized to fit the look and feel of each demo is placed within our vendors folder.
Whilst we have a _variables.scss file within this folder, you may choose to ignore it when customizing your newly included plugins.
Closing Notes
When creating new scss files, please remember to import your new scss files within our styles.scss. We have segmented our imports by components, plugins, and layouts for you to include your files at the bottom of corresponding section. For example, if you are adding a new component scss file, add the file path at the bottom of our components import code.
For a video tutorial on this, please have a look here: https://keenthemes.com/tutorials/sass-customization-overview
