Global Styles

While each component may have its own styles, some styles are globally defined

ScandiPWA defines certain global styles. These are defined in SCSS in the style directory, which contains 3 subdirectories, as well as a file that imports all the styles from them.

Directories in style

abstract

The abstract subdirectory includes SCSS definitions that do not directly affect any element. Instead, they define utilities such as media selectors (_media.scss), SCSS variable declarations (_variables.scss) and some generic styles that could be used to style an element (_loader.scss, _button.scss).

base

This directory defines the base styles for various HTML elements, such as tables, links, buttons and lists. In _breakpoints.scss, it defines classes that can be added to elements to easily hide them on some devices (mobile/tablet/desktop)

cms

This directory contains styles for defining the look of various content inserted through a content management system (typically Magento CMS). Currently, it styles various promotion blocks, as well as sliders.

Breakpoints

Selector	Visible on Mobile	Visible on Tablet	Visible on Desktop
desktop			✔️
before-desktop	✔️	✔️
tablet		✔️
tablet-landscape		landscape only
after-mobile			✔️
mobile	✔️

To use a breakpoint, use include:

@include mobile {
    // your styles
}