Preprocessing

In order to enjoy the magic of CSS preprocessing we need to create a .scss file in the Stylesheet folder (located in
the Resources panel). To create a .scss file in the Designer:

1. Launch the Designer.
2. Create a new Print template (CSS preprocessing is not limited to print templates).
3. Right mouse click the Stylesheets folder and choose: New Stylesheet > SCSS file. This creates a new Sass
   file with the .scss file extension.

In order to compile a .scss file into a normal .css file:

1. Right mouse click the .scss file in the Stylesheets folder and choose Compile from the contextual menu.
Once compiled a CSS file appears with the same name as the .scss file but with the .css file extension. Use this
file in your sections.

Note! Re-compiling the .scss file overwrites possible changes to the .css file.

 

Variables

Sass uses the $ symbol to make something a variable. Compiling the .scss file in the Stylesheets folder outputs a
normal CSS stylesheet with the variable placed in the CSS. The sample below shows color values and font family
names stored in variables. On compiling the .scss file the respective values are written to the CSS.

The Sass code:

$primary-color: #CF649A;
$font-stack: Helvetica, sans-serif;
$border-color: #E7E7E7;
h1 {
color: $primary-color;
font: $font-stack;
font-size: 24pt;
border-bottom: 1pt solid $border-color;
}
h2 {
color: $primary-color;
font: $font-stack;
font-size: 18pt;
}
p {
font: $font-stack;
margin-bottom: 0.5em;
}

The compiled CSS:

h1 {
color: #CF649A;
font: Helvetica, sans-serif;
font-size: 24pt;
border-bottom: 1pt solid #E7E7E7;
}
h2 {
color: #CF649A;
font: Helvetica, sans-serif;
font-size: 18pt;
}
p {
font: Helvetica, sans-serif;
margin-bottom: 0.5em;
}

 

Nesting

CSS lacks visual hierarchy when working with child selectors. The following snippet shows rules for elements in a
specific detail table. Each rule starts with the ID of that detail table (e.g. #products). Changing the ID of the
table in your template requires you to change each line in your CSS file. Consider the following CSS code:

#products {
width: 100%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
}
#products td {
font-size: 9pt;
padding: 5px;
border-bottom: 0.75pt solid #e7e7e7;
}
#products td:first-child {
width: 10%;
}
#products td:last-child {
text-align: right;
}
#products thead td {
text-transform: uppercase;
border-bottom: 1.5pt solid #e7e7e7;
color: #CF649A;
font-weight: bold;
}

Sass lets you nest CSS selectors following the same visual hierarchy of your HTML and helps you organizing
styles. The following code nests the styles of the child elements of the #products table. Changing the ID in the template only requires a single change in your .scss file. Compiling the Sass code results in the CSS as shown above.

$primary-color: #CF649A;
$border-color: #E7E7E7;
#products {
width: 100%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
td {
font-size: 9pt;
padding: 5px;
border-bottom: 0.75pt solid $border-color;
}
td:first-child {
width: 10%;
}
td:last-child {
text-align: right;
}
thead td {
text-transform: uppercase;
border-bottom: 1.5pt solid $border-color;
color: $primary-color;
font-weight: bold;
}
}

 

Partials

Partials are smaller Sass files. Use them to group styles in separate files. Think of creating individual files for your
detail table, address blocks, body copy etc. Group these chunks in folders and import them to main .scss file.
This is a great way to modularize your CSS and helps keep things tidy. See the Import section on how to load
these into your main .scss file.

Note! By default .scss files auto compile when saving changes. This is not convenient for partials, which
are regular .scss files, as variables could be missing resulting in compile warnings. Start your partial with
a leading underscore to prevent Connect from auto compiling e.g. _addressblock.scss,
_detailtables.scss etc.

 

Import

The @import directive allows you to import .css and .scss files and combine them into a single CSS file. The
following shows how to import a couple Sass files stored in a subfolder. Variables defined in the base Sass file are
available in these files too. The paths are relative to the base file.

$primary-color: #CF649A;
$font-stack: Helvetica, sans-serif;
$border-color: #E7E7E7;
@import "partials/_detail_tables.scss";
@import "partials/_general.scss";
@import "partials/_toc.scss";

The following image shows this sample in the Stylesheets folder of our template. The base_styles.scss file is our base Sass file.

 

Mixins

When writing the same CSS code over and over again you might be better of using a mixin. Mixins are functions
to retrieve sets of reusable properties. They can be considered variables containing one or more properties.
Mixins can take values as arguments to make things even more flexible. Mixins are included in the Sass file with
the @include directive. The following sample fetches a series of properties and accepts arguments for the border-with, border-color and the background-color.

The Sass code:

@mixin boxed( $width, $color, $background ) {
border-left: $width solid $color;
background-color: $background;
padding: 1em;
height: auto !important;
}
.box {
@include boxed( 5px, #C6538C, #F3DCE8 );
margin-right: 1em;
}
blockquote {
@include boxed( 5px, #6CA2C5, #E1ECF3 );
}
pre {
@include boxed(5px, #003366, #F8F8F8 );
}

The compiled CSS:

.box {
border-left: 5px solid #C6538C;
background-color: #F3DCE8;
padding: 1em;
height: auto !important;
margin-right: 1em;
}
blockquote {
border-left: 5px solid #6CA2C5;
background-color: #E1ECF3;
padding: 1em;
height: auto !important;
}
pre {
border-left: 5px solid #003366;
background-color: #F8F8F8;
padding: 1em;
height: auto !important;
}

 

Extend

The @extend directive allows to inherit CSS properties from an other selector. It will regroup common
properties under a list of selectors (e.g. h1, h2, h3) and keep unique properties separate. Consider the following
Sass code:

h1 {
color: limegreen;
font-family: Calibri;
font-size: 2em;
} h2 {
@extend h1;
font-size: 1.6em;
} h3 {
@extend h1;
font-size: 1.2em;
}

The compiled CSS looks like this:

h1, h2, h3 {
color: limegreen;
font-family: Calibri;
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.2em;
}

Note! Extend feels similar to Mixins, there are two differences: @extend doesn’t have parameters and
@mixin can’t combine selectors.