Customize

Stylesheet Organization

The main.scss file in the project serves as the central hub for importing various SCSS files. Here's a breakdown of each imported file and its purpose:

• variables.scss: This file contains SCSS variables that are used throughout the project. It typically includes color schemes, font settings, and other reusable values.

• mixins.scss: This file holds SCSS mixins which are reusable pieces of styles or functions. Mixins are used to make the CSS more maintainable and avoid code duplication.

• base.scss: Contains foundational styles such as resets, typography, and body background. These are broad, global styles that apply to the entire website.

• layout.scss: This file includes styles related to the layout of the website, such as header, footer, and grid system customizations.

• components.scss: Styles for reusable components like buttons, modals, and cards are defined here. It helps in keeping component-specific styles organized.

• pages.scss: Dedicated to page-specific styling. For example, styles unique to the homepage or contact page would reside here.

• utilities.scss: A utility file is for utility classes that serve specific purposes, like margin and padding helpers, text alignment, and visibility.

• responsive.scss: Contains media queries and styles for responsive design. It ensures that the website looks good on all devices and screen sizes.