In Magento 2, .less files are used for styling and are organized in a hierarchical and modular structure. Magento loads these .less files in a specific order, depending on their type, location, and purpose. Here is a breakdown of the primary .less files Magento uses in a theme, along with their usage and load order.

Core .less Files in Magento 2

  1. _variables.less
  • Usage: Defines variables for colors, fonts, sizes, and other reusable values.
  • Load Order: This file is loaded first, as other .less files use the variables defined here.
  • Path: lib/web/css/source/lib/variables/_variables.less
  1. _theme.less
  • Usage: Used to override the default variables with theme-specific values, adjusting colors, fonts, and other theme-specific customizations.
  • Load Order: Loaded after _variables.less to override the default values.
  • Path: app/design/frontend/{Vendor}/{theme}/web/css/source/_theme.less
  1. _mixins.less
  • Usage: Contains mixins (reusable pieces of code) that can be included throughout other .less files.
  • Load Order: Loaded early as it’s often referenced by other files.
  • Path: lib/web/css/source/lib/_mixins.less
  1. _extends.less
  • Usage: Holds specific class extensions and overrides for more modular styling.
  • Load Order: Loaded after mixins and variables but before the main structure and layout files.
  • Path: lib/web/css/source/_extends.less (extend classes for modular overrides).
  1. _reset.less
  • Usage: Resets browser-specific styles to ensure consistency across different browsers.
  • Load Order: Loaded before base styles.
  • Path: lib/web/css/source/lib/_reset.less
  1. _typography.less
  • Usage: Defines base typography, including font styles, sizes, and line heights.
  • Load Order: Loaded early to establish baseline typography.
  • Path: lib/web/css/source/lib/_typography.less

Theme-Specific .less Files

  1. styles-l.less and styles-m.less
  • Usage: The main entry point files. styles-l.less for larger screens (desktop) and styles-m.less for smaller screens (mobile).
  • Load Order: These are the primary entry points and are compiled as the final main stylesheets.
  • Path: app/design/frontend/{Vendor}/{theme}/web/css/styles-l.less, styles-m.less

Layout-Specific .less Files

  1. _layout.less
  • Usage: Holds layout-specific styles such as containers, grids, and general structural styles.
  • Load Order: Loaded after variables and theme files to ensure consistency.
  • Path: lib/web/css/source/_layout.less
  1. _buttons.less
  • Usage: Styles specific to buttons across the theme.
  • Load Order: Loaded after structure-related .less files.
  • Path: lib/web/css/source/lib/_buttons.less
  1. _forms.less
    • Usage: Form element styling, including inputs, labels, and text areas.
    • Load Order: Loaded after other base styles and variables.
    • Path: lib/web/css/source/_forms.less
  2. _tables.less
    • Usage: Defines styles for tables.
    • Load Order: Loaded after main styling files, as tables are specific elements.
    • Path: lib/web/css/source/_tables.less
  3. _breadcrumbs.less
    • Usage: Styles specific to breadcrumbs.
    • Load Order: Loaded later in the styling hierarchy.
    • Path: lib/web/css/source/_breadcrumbs.less
  4. _sections.less
    • Usage: Defines specific styling for different sections of a page.
    • Load Order: Loaded after main styling files for more targeted section styles.
    • Path: lib/web/css/source/_sections.less
  5. _pages.less
    • Usage: Styles specific to individual pages.
    • Load Order: Loaded toward the end of the load order.
    • Path: lib/web/css/source/_pages.less
  6. _popups.less
    • Usage: Styling for modal and popup windows.
    • Load Order: Loaded toward the end to target modal elements specifically.
    • Path: lib/web/css/source/_popups.less
  7. _actions-toolbar.less
    • Usage: Styles specific to action toolbars within pages.
    • Load Order: Loaded toward the end.
    • Path: lib/web/css/source/_actions-toolbar.less

Email-Specific .less Files

  1. _email-variables.less
    • Usage: Variables used exclusively for emails.
    • Load Order: Loaded before email-specific styles.
    • Path: lib/web/css/source/email/_email-variables.less
  2. _email-extend.less
    • Usage: Email styling overrides.
    • Load Order: Loaded after _email-variables.less.
    • Path: lib/web/css/source/email/_email-extend.less

These files should be modified in your theme’s web/css/source folder for overrides. They are loaded in the order described above to establish foundational styles first, followed by layout, components, and specific elements, ensuring a structured and modular approach to styling in Magento 2.