Implement the Sass Files

This topic applies to

Applies to

SuiteCommerce Web Stores

Depending on the options that you choose, the extension development tools can generate Sass files when you create a baseline extension, add a module, or add a custom content type module to an extension. Use the Sass file to style the HTML included in the template file.

The tools generate the Sass file in the Sass/ directory for the module and use the following naming convention:

_<module_name>.scss

For more information, see Sass Best Practices.

To implement the Sass files for the CCT:

  1. Open the Sass file for the CCT module.

    For example, In the ImageViewer/Module/ImageViewerCCT/Sass directory, open _imageviewercct.scss.

  2. Add the Sass code.

    Based on the example ImageViewer CCT, your Sass styles in the module directory might look similar to the following:

    .imageviewercct {
      position: relative;
    }
    
    .imageviewercct-container{
      overflow:hidden;
      height:100%;
      text-align:center;
    }
    
    .imageviewercct-container-image{
      width: 100%;
    }
    
    .imageviewercct-container-caption-top {
      top:0px;
        margin-top: 25px;
    }
    
    .imageviewercct-container-caption-center {
      top:50%;
      transform: translateY(-50%);
    }
    
    .imageviewercct-container-caption-bottom {
      bottom:0px;
        margin-bottom: 25px;
    }
    
    .imageviewercct-container-caption{
      position:absolute;
      width:100%;
      text-align:center;
      padding: 0px 25px;
    
      h2.imageviewercct-container-caption-title{
        text-shadow: 1px 1px 1px #000,
                 -1px -1px 1px #000,
                 -1px 1px 1px #000,
                  1px -1px 1px #000;
          font-size:$sc-font-size-m * 2.66;
          line-height: $sc-font-size-m * 2.66;
          color:$sc-color-primary;
      }
    }
  3. Save the Sass file.

  4. To continue creating an extension for a CCT, go to Test and Deploy the CCT Extension