Path Customization Guide in MIZ

The MIZ framework allows developers to easily configure and customize their required paths. This guide explains how to use variables and mixins to customize paths.

File Structure #

The file for path settings is located at: miz/sass/config/_path.scss

Variables and Mixins #

In this file, the following variables are defined, which can be used to customize paths:

                    
SCSS

                    
$assets-path : '../';
$media-path : '#{$assets-path}media/';
$images-path : '#{$media-path}images/';
$videos-path : '#{$media-path}videos/';
$audios-path : '#{$media-path}audios/';
$fonts-path : '#{$assets-path}fonts/';
$css-path : '#{$assets-path}css/';
$js-path : '#{$assets-path}js/';
$vendors-path : '#{$assets-path}vendors/';
                

Customization Methods #

Users can customize paths by changing the values of the above variables according to their project structure. For example, if your file structure is different, you can adjust these variable values to match your needs.

Documentation and Examples #

To use an image in an SCSS file, you can use the defined variables as follows:

                    
SCSS

                    
background-image: url(image-asset("background-hero.webp"));
                

This command loads the background-hero.webp image from the path defined in $images-path.

Advanced Configuration #

Users can create more customized paths using composite variables. For example, to change the path of your CSS files, you can modify the $css-path variable as follows:

                    
SCSS

                    
$css-path : '#{$assets-path}stylesheets/';
                

This change will set the path of the CSS files to the stylesheets folder.

Tips and Best Practices #

• Better Organization: For better project organization, always define related paths in a separate file and avoid using direct paths in your SCSS files.

• Use Variables: Using variables not only simplifies coding but also makes future changes easier.

• Compatibility: Ensure that the defined paths are compatible with your project structure and are correctly set.

Conclusion #

By using the provided variables and mixins in MIZ, you can easily customize your project paths and leverage the capabilities of this framework for better file and resource management.