Weebly themes support using LESS for styling. LESS is a pre-processor for CSS. It extends CSS, so your stylesheet uses the same classes, pseudo-classes, IDs, etc. as standard CSS, but with added functionality.

Variables

You can define variables to be used in your stylesheet. For example:


@orange: #FF9933;
@blue: #6699FF;
...
#header {
    background: @orange;
}

This results in:



#header {
    background: #FF9933;
}

If your theme has multiple color variations, you use variables to define the properties that will change color with each variation.

Mixins

Mixins allow you to include properties from one rule-set into another.

For example, you might create this class:

.serif{
    font-family: Georgia, 'Times New Roman', serif;
}

And use it the following way:


p {
    font-size: 15px;
    .serif;
}

Nested Rules

You can nest a number of rules into one.

For example, instead of this:


#banner {
    display: table;
    color: #ffffff;
}

#banner .content {
    text-align: center;
}

You can do this:


#banner {
    display: table;
    color: #ffffff;
    .content{
        text-align: center;
    }
}

Operations and Functions

LESS allows you to manipulate values using variables and math. For example, you can lighten or darken colors using percentages, or you might make sizes relative to each other.

For example:

@textColor: #0000FF
@baseFontSize: 12px;

a:hover {
    color: lighten(@textColor, 25%);
}

blockquote {
    font-size: @baseFontSize + 6;
    color: darken(@textColor, 50%);
}

Help make these docs better!









Tags: