LESS style sheet language

What is LESS?

Less is a CSS preprocessor that extends the CSS language. LESS allows you to use variables and do things such as change all of the colors on your site by just changing one variable. LESS CSS also allows you to nest statements together, reuse code, and more such as nesting all media queries within one selector instead of repeating it for every adjustment that needs to be made per screen size. Select the following for a list of LESS variables to target site-wide.

Some of the benefits of using LESS include:

• Streamlined code.  Avoid having to repeat code over and over again. 
• Time saved. Without unnecessary repetition of CSS code, there's more time to code.
• Easier maintenance. Defined values need to be updated only once (in the control panel), not everywhere they occur.

How to use LESS in Expert

LESS can only be entered into the custom site CSS field in the control panel (Site tools > Control panel > Branding > Custom Site CSS). LESS does NOT work if included in a CSS block in a template or other page. You also do not need to worry about breaking your CSS when entering LESS into the control panel because it will validate your code before applying it to your site. For more information on LESS functionality, visit http://lesscss.org/features.

LESS variables

Variables allow for easier theming and maintenance of CSS rule sets (a selector and its block of declarations). This means that when a variable value is declared in the control panel's custom CSS, it will update all rule sets where that variable has been defined in the code base. For example, if you want to change the colors for secondary links throughout the skin, you would add the following variable definition into the control panel:

@secondary-link-color: #00b500;

This will then be processed and rendered in all the places it is used in the site's CSS such as the drop-down links:

.mt-dropdown a {
    color: #00b500;
}

Mixins

A mixin is an easy way to include multiple style declarations from one rule set into another. The mixin can be written like any other CSS rule set and is referenced by referencing the mixin selector as a declaration:

// This is a mixin ruleset used to style the search results filter carousel. This example contains variables as well.
.flexbox-style {
    border: 1px solid @dynamic-listing-border-color;
    border-radius: @border-radius-lsf;
    box-sizing: border-box;
}

Which is then referenced by another rule set like this:

.mt-help-carousel li a {
    display: block;
    .flexbox-style;
    height: 12em;
    margin: .5em;
    padding: 1em;
    text-align: center;
}

Then it is rendered in the compiled CSS like this:

.mt-help-carousel li a {
    display: block;
    border: 1px solid #b4b4b4;
    border-radius: .5em;
    box-sizing: border-box;
    height: 12em;
    margin: .5em;
    padding: 1em;
    text-align: center;
}

Nested rule sets

Nested rule sets allow for cleaner more efficient code. Instead of listing out each rule set separately, you can nest rule sets inside other rule sets hierarchically. In Expert, nesting is used for media queries and link pseudo classes such as :hover, :active, :focus and :visited but can be used for any nested HTML elements in your custom CSS.

Default nesting

Let's start with the nested rule set used for banner controls. This is how it looks before it is rendered. Notice how each child element is nested in the original style:

.mt-notice-controls {
    float: right;
    margin-top: .625em;
    li {
        display: inline-block;
        margin: 0 0 0 1em;
    }
    a:before {
        font-size: 125%;
        margin-right: .5em;
        vertical-align: middle;
    }
}

This is how the nested rule set would appear rendered as CSS:

.mt-notice-controls {
    float: right;
    margin-top: .625em;
}
.mt-notice-controls li {
    display: inline-block;
    margin: 0 0 0 1em;
}
.mt-notice-controls a:before {
    font-size: 125%;
    margin-right: .5em;
    vertical-align: middle;
}

@Media nesting

When it comes to media queries and nested pseudo elements, the nesting looks slightly different.

For media queries, you end up with slightly modified nesting references. The following rule set changes the padding underneath page titles based on what screen size they are viewed in. Notice how the @media selector takes the place of the nested selector.

#title {
    border-bottom: 1px solid @secondary-container-border-color;
    margin-top: 0;
    padding-bottom: .5rem;
    word-wrap: break-word;
    @media all and (min-width: 18.75em) {
        padding-bottom: .1em;
    }
    @media all and (min-width: 65.25em) {
        padding-bottom: .2em;
    }
    @media all and (min-width: 80em) {
        padding-bottom: .25em;
    }
}

This is how the above would be rendered in CSS. The previous example is a some LESS code and a better hierarchically relationship between the selector and its media queries.

#title {
    border-bottom: 1px solid #ddd;
    margin-top: 0;
    padding-bottom: .5rem;
    word-wrap: break-word
}
@media all and (min-width: 18.75em) {
    #title {
        padding-bottom: .1em
    }
}
@media all and (min-width: 65.25em) {
    #title {
        padding-bottom: .2em
    }
}
@media all and (min-width: 80em) {
    #title {
        padding-bottom: .25em
    }
}

Nested pseudo classes and elements

When referencing pseudo classes and elements, you will need to use the & symbol to represent the selector parent. Here is an example of the secondary link mixin with nested link pseudo classes. 

.mt-secondary-link-style {
    color: @secondary-link-color;
    &:visited {
        color: @secondary-link-color-visited;
    }
    .no-touch &:hover {
        color: @secondary-link-color-hover;
    }
    &:active {
        color: @secondary-link-color-active;
    }
    &:focus {
        color: @secondary-link-color-focus;
    }
}

The following code is how the CSS would be delivered to the browser. Notice that some of the selectors are combined as well. When LESS is compiled, it merges rule sets that are the same so that it can deliver smaller CSS files to the browser. This allows for faster page loading.

.mt-secondary-link,
.mt-secondary-link:visited {
    color: #999
}
.mt-secondary-link:active,
.mt-secondary-link:focus,
.no-touch .mt-secondary-link:hover {
    color: #30b3f6
}

LESS functions

The LESS compiler contains many built-in functions that can calculate, transform, and manipulate values in CSS. The most widely used ones in Expert transform colors and calculate font sizes. The entire color theme of Expert is built off of one color variable definition, then manipulated with functions to create the rest of the colors in the skin.

Here is an example of how one color controls the rest. The highlight color is desaturated then applied to the primary container background and border colors where it is then lightened. All of the gray shades in the skin have been calculated in a similar fashion.

// Default color of the skin that is used to calculate all other colors
@highlight-color: #30b3f6;
@highlight-color-desaturated: desaturate(@highlight-color, 95%);

// Some of the primary container colors generated through LESS color functions.
@primary-container-background-color: lighten(@highlight-color-desaturated, 29%);
@primary-container-border-color: lighten(@highlight-color-desaturated, 13%);

Colors are not the only calculations done by LESS in Expert. Font sizes for headings (H1 through H6) are set smaller at different screen sizes so that they do not take up the entire screen. Here the .mt-heading-h1 mixin is using a math calculation to set a smaller font size in mobile view no matter what the original H1 font size variable is defined as.

// H1 font size variable
@h1-font-size: 250%;

// H1 mixin rule set with font size calculation
.mt-heading-h1 {
    color: @h1-color;
    font: @h1-font-style @h1-font-weight @h1-font-size/@h1-line-height @h1-font-family;
    margin: @h1-margin;
    padding: @h1-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h1-font-size * .75);
    }
    @media all and (min-width: 37.5em) {
        font-size: @h1-font-size;
    }
}\