Name: Styling with Global Variables in SAP Commerce Cloud Composable Storefront
Uploaded: 2024-1-8
Duration: 516 s
Description: In this video, you will learn about the CSS techniques which are incorporated in SAP Commerce Cloud, Composable Storefront and how you can customize your storefront by configuring the global variables.

Share feedback

<p>Planned maintenance of Practice Systems</p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Subscribe now

Learn more

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div><div>In this video, you will learn about the CSS techniques which are incorporated in SAP Commerce Cloud, Composable Storefront and how you can customize your storefront by configuring the global variables.</div></div></div></div>

Styling with Global Variables in SAP Commerce Cloud Composable Storefront

Hello everyone, this video is about styling with global variables in Composable Storefront.  Composable Storefront incorporates a combination of the following CSS techniques.  SASS is being used as a pre-processing language just like in the majority of today's UI frameworks.  It enables us to write more maintainable and better organized CSS code by adding features that are not available in standard CSS.  CSS custom properties, also known as CSS variables,  are used for global theming.  These variables can hold values such as colors, font sizes,  spacing and more, and these values can be referenced and reused throughout one's CSS code.  Last on this list is CSS post-processing, also known as post-CSS, which is intended to be used to polyfill any syntax required by older browsers.  In Composable Storefront all of the default CSS rules are provided in a separate spartacus/styles library in the source code.  These rules are optional, configurable and extensible.  As mentioned earlier, global theming in Composable Storefront uses CSS variables.  The reason being that these variables have the advantage of being runtime configurable and offer inheritance capabilities.  Composable Storefront comes with some default themes like Sparta,  Lambda and Santorini, each having its own color,  font and style palette.  The Santorini theme is the default out-of-the-box storefronts.  Default global CSS variables defining the Santorini theme can be found in the following variables.scss file.  This is the variables.scss file of the Santorini theme from version 6.3 of the source code.  As we can see, all global variables like color, font,  and spacing are declared as SASS variables.  These color variables are then used in the theme colors SASS map, as can be seen here.  These values in the SASS map are then iterated through and set as CSS variables in this root.scss file.  These CSS variables are assigned at the root selector level.  We can also see the font and spacing related variables in this SCSS file.  Now, in the storefront, we can see the assigned values of colors, fonts, etc.  from the root.css variables being applied.  We can see the primary color blue declared in the variables.scss file  getting applied at the root selector level.  This is how the global theme variables are configured and applied to the storefront via CSS variables.  Now let us learn how to customize and override these global CSS variables.  We can customize global variables in the style.scss file of the generated app as can be seen in this screenshot.  To get around using the important CSS property in the root selector,  we recommend using the body selector instead.  Now let us see a working demonstration of overriding global CSS variables.  This is being demonstrated in a local environment  running version 6.3 of Composable Storefront.  In this product details page we can see the add to cart button  being assigned the primary color by default, which is blue,  and the product code in the product intro component being assigned the secondary color, which is grey.  Now let us change the primary and secondary color values and see how it affects these components.  As mentioned earlier, we add a body selector in the style.scss file  and use the cx-color-primary and cx-color-secondary CSS variables to override the colors.  Now we assign brown as the primary color and green as the secondary color.  In the storefront, we can see the new colors being used by the components.  In our case, the Add to Cart button has now been assigned the color brown,  and the product code element has been assigned the color green.  Similarly, all other global CSS variables can be overridden as needed.  Composable storefront consists of a large number of components that one can use to build the storefront experience.  But styling is a subjective topic and no matter what Composable Storefront delivers out of box, it will likely not align with one's brand or corporate identity.  For this reason, Composable  Storefront is meant to be highly flexible, so that one can extend component styles or skip them entirely. Hence, component styles are delivered optionally in the style library.  The contract between the style library and the component library is established through the  unique component selector. Generally, placeholder selectors are used for extending the default styles provided by storefront libraries.  If certain standard component styles need to be disabled, then the component selectors can be added to the skip component styles list.  We will take a look at these features in the upcoming demo.  In this demo, we will first  show you how to disable a default component style provided via a style library.  Let us use page breadcrumbs as an example.  As mentioned earlier, styles are  associated with component selectors, which are generally  unique in Composable Storefront, making it convenient to override or skip their styling.  In this case, we can see the default styling is associated with component selector cx-breadcrumb for the breadcrumb component.  To skip the default styling and build CSS rules for breadcrumb from scratch, the CX The cx-breadcrumb component selector must be added to the skipComponentStyles list in the styles.scss file.  Please note that the skipComponentStyles list  has to be placed somewhere before the default style libraries get loaded.  This is how they get disabled.  Hence, the list must be placed before the spartacus/styles/index import statement.  Now in the storefront we can see that the default styling of the cx-breadcrumb component is disabled.  This is how default style libraries can be disabled per component.  Now to extend or override the default styling using placeholder selectors,  we can use the mini-cart component as an example.  By default, the background color of the mini-cart component has been configured to be the primary color, as can be seen here.  Now, we can change the background color of this mini-cart component to the secondary color via a placeholder selector.  Placeholder selectors, a SASS technique, start with a percent sign, such as %cx-mini-cart, to define reusable styles.  Placeholder selectors are not added to the final CSS.  They have to be explicitly extended to end up in final CSS.  In our case, to extend the styling of the cx-mini-cart component selector  and to define a custom background color we use a placeholder selector named %custom-mini-cart and add the styling rules.  Here, we have overridden background color of the mini-cart component to use the secondary color.  Now it must be extended by the cx-mini-cart component selector for it to be applied to the final CSS.  The optional flag ensures that the code will not break during the build if some specific import is missing from the imported styles.  Now in the storefront we can see that the mini cart's background color has changed to the secondary color.  This is how one can extend the default component styles  defined in the style libraries using placeholder selectors.  This is all we have to cover for styling with global variables.  There is detailed documentation on this topic in the SAP Help Portal.  Do take a look and happy learning!