I85PREP
⌘ K
Adobe Commerce Front-End Dev Expert study materials
Adobe Commerce Front-End Dev Expert study resources

Adobe Commerce Front-End Dev Expert: CSS, LESS, and Static Asset Management

Adobe Commerce Front-End Dev Expert · Work through your exam, one topic at a time.

All guide sections

CSS, LESS, and Static Asset Management

LESS compilation pipeline

Magento compiles LESS to CSS via the frontend area static content deploy or on-the-fly in developer mode. Theme variables live in web/css/source/_variables.less and _theme.less; _extend.less is the child theme override entry point. @import directives pull in module _module.less files. The styles-m.less and styles-l.less split mobile vs. desktop.

Static content deployment

bin/magento setup:static-content:deploy generates pub/static per locale and theme. In production, pub/static is served directly; in developer mode, files are symlinked or generated on request. static_content_on_demand and sign_static affect URL signing. Traps: editing pub/static directly (overwritten on deploy) or expecting LESS changes without recompiling.

Traps to expect

  • Confusing _extend.less (child overrides) with _theme.less (variable overrides).
  • Forgetting that module LESS must be imported in the theme's _module.less chain.
  • Assuming pub/static edits persist after deploy.
  • Missing view.xml image configuration for responsive images.

Rule of thumb

Never edit generated files under pub/static; change source LESS in app/design/.../web/css/source, then run static content deploy (or clear pub/static and var/view_preprocessed in developer mode).

Worked example

To override a variable: in child theme web/css/source/_theme.less, set @primary__color: #123456;. To add rules, use _extend.less with & when (@media-common = true) { ... } so rules apply across breakpoints.

Images and view.xml

etc/view.xml defines image types, widths, and aspect ratios used by view.xml-driven image helpers.