Implementing Sass Files in SuiteCommerce Extensions

TL;DR Opening

Implementing Sass files is crucial for customizing the design of your SuiteCommerce extensions. Sass files help style HTML in templates effectively, enhancing the user experience of custom content types (CCT).

What Are Sass Files?

Sass (Syntactically Awesome StyleSheets) is a CSS preprocessor that allows for more powerful styles through features like variables, nesting, and mixins. When using SuiteCommerce, Sass files can be automatically generated by the extension development tools when you create a baseline extension, add a module, or add a custom content type module.

Naming Convention

Sass files are typically generated in the Sass/ directory of the module and follow this naming convention:

_<module_name>.scss

This structure helps maintain organization within your extension files.

Steps to Implement Sass Files for a Custom Content Type (CCT)

1. Open the Sass File
   Navigate to the Sass file associated with your CCT module. For instance, for the ImageViewer CCT, open:

   plaintextCopy

   ImageViewer/Module/ImageViewerCCT/Sass/_imageviewercct.scss

2. Add Sass Code
   You can style your component by adding the necessary Sass code. An example of what the Sass styles might look like for the image viewer CCT is shown below:

   cssCopy

   1.imageviewercct {
   2  position: relative;
   3}
   4 
   5.imageviewercct-container {
   6  overflow: hidden;
   7  height: 100%;
   8  text-align: center;
   9}
   10 
   11.imageviewercct-container-image {
   12  width: 100%;
   13}
   14 
   15.imageviewercct-container-caption-top {
   16  top: 0px;
   17  margin-top: 25px;
   18}
   19 
   20.imageviewercct-container-caption-center {
   21  top: 50%;
   22  transform: translateY(-50%);
   23}
   24 
   25.imageviewercct-container-caption-bottom {
   26  bottom: 0px;
   27  margin-bottom: 25px;
   28}
   29 
   30.imageviewercct-container-caption {
   31  position: absolute;
   32  width: 100%;
   33  text-align: center;
   34  padding: 0px 25px;
   35}
   36 
   37h2.imageviewercct-container-caption-title {
   38  text-shadow: 1px 1px 1px #000,
   39  -1px -1px 1px #000,
   40  -1px 1px 1px #000,
   41  1px -1px 1px #000;
   42  font-size: $sc-font-size-m * 2.66;
   43  line-height: $sc-font-size-m * 2.66;
   44  color: $sc-color-primary;
   45}

3. Save the Sass File
   Once you have added your styles, remember to save the Sass file.

4. Next Steps
   After implementing your styles, you can proceed with testing and deploying your CCT extension. For guidance, refer to the section on Test and Deploy the CCT Extension.

Key Notes on Sass Best Practices

• Use Sass conventions for naming and organizing styles.
• Create modular Sass files specific to your component to maintain clarity.
• Utilize the SuiteCommerce Base Theme as a reference for best practices in theming and styling.

Who This Affects

• Developers: Responsible for implementing styles and features within SuiteCommerce.
• Web Designers: Working on enhancing the visual elements of custom content types.
• Project Managers: Overseeing the development process of SuiteCommerce extensions.

Key Takeaways

• Sass files enhance the styling of custom content types in SuiteCommerce extensions.
• Properly structuring Sass files and styles is crucial for maintainability.
• Utilize best practices for creating variables and organizing themes.