Implement the Sass Files

This topic applies to

Applies to

Aconcagua | 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