Implement the Sass Files

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 for Themes.

To implement the Sass files for the CCT:

Open the Sass file for the CCT module.

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

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;
  }
}

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

To implement the Sass files for the CCT:

Related Topics