LESS

LESS is a stylesheet language that extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS reduces the overall time it takes to create and maintain your code base, while also keeping your code clean and optimized.

Variables

Variables allow you to specify widely-used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing a single line of code. An example is shown below:

//LESS
@myBlue:              #08D;

h1, h2, h3, h4, h5, h6 {
    color: @myBlue;
}
a:hover {
    color: @myBlue;
}
// Compiled CSS
h1, h2, h3, h4, h5, h6 {
    color: #08D;
}
a:hover {
    color: #08D;
}

Mixins

Mixins allow you to embed all the properties of one class into another by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below:

// LESS
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}
// Compiled CSS
#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Nested Rules

Rather than constructing long selector names to specify inheritance, in LESS you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

// LESS
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
        }
        p { font-size: 12px;
        a { text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}
// Compiled CSS
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

Functions & Operations

Functions & Operations provides the ability to use mathematical operations in your CSS values, as well as manipulate values through functions.

// LESS
@the-border:        1px;
@base-color:        #111;
@red:               #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}
// Compiled CSS

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

The above examples introduce you to the basics of LESS. For a more detailed overview, please visit the http://lesscss.org/

DMS Variables

These are the variables which are part of PageLines DMS core.

Layout

@pl-base Page background color
@pl-page-width User set page width
@pl-content-width Uset set content width
@pl-responsive-width User set responsive width
@pl-sidebar-width User set sidebar width
@pl-secondary-width User set secondary sidebar width

Path

@{plChildRoot} Used to specify root Child theme URL. Example: http://example.com/wp-content/themes/dms-child-theme
@{plRoot} Used to set Parent theme URL. Example: http://example.com/wp-content/themes/dms/dms
@{plSectionsRoot} Used to specify /sections URL. Example: http://example.com/wp-content/themes/dms/dms/sections
@{plExtendRoot} Used to specify section root in pagelines-sections plugin. Example: http://example.com/wp-content/plugins/pagelines-sections
@{plPluginsRoot} Used to specify base plugin path directory. Example: http://example.com/wp-content/plugins

Example

// In Sections
.example {
    background: url(@{plSectionsRoot}/yoursection/img/bar.png);
}

// In Child Themes
.example {
    background: url(@{plChildRoot}/img/bar.png);
}

Responsive

@resLargeDesktop 1200px
@resDesktop 979px
@resPortraitTablet 767px
@resPhoneLandscape 480px

Typography

@baseFontSize @plFontSize
@baseLineHeight @plFontSize * 1.55
@propLineHeight 1.55em
@baseHeaderSize @plHeaderSize
@defaultFont "Helvetica Neue", "Helvetica", Arial, serif;
@codeFont Menlo, Monaco, "Courier New", monospace;
@baseFontFamily @plBaseFont
@baseFontWeight @plBaseWeight

Component Sizing

Based on font-size 14px and line-height 20px.

@fontSizeLarge @baseFontSize * 1.25; ~18px
@fontSizeSmall @baseFontSize * 0.85; ~12px
@fontSizeMini @baseFontSize * 0.75; ~11px
@paddingLarge 11px 19px; // 44px
@paddingSmall 2px 10px; // 26px
@paddingMini 0 6px; // 22px
@baseBorderRadius 4px;
@borderRadiusLarge 6px;
@borderRadiusSmall 3px;

Color Variables

Grays

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee

Accent Colors

@white #fff
@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Buttons

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight #51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnImportantBackground #ee5f5b
@btnImportantBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

Form States and Alerts

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

This is a partial listing, for the entire variable library, see the /less directory located in /wp-content/themes/pagelines/.

DMS Mixins

.border-radius() Round the corners of an element. Can be a single value or four space-separated values
.box-shadow() Add a drop shadow to an element
.transition() Add CSS3 transition effect (e.g., all .2s linear)
.box-sizing() Change the box model for an element (e.g., border-box for a full-width input)
#translucent > .background() Give an element a translucent background color
#translucent > .border() Give an element a translucent border color
#gradient > .vertical() Create a cross-browser vertical background gradient
#gradient > .horizontal() Create a cross-browser horizontal background gradient
#gradient > .directional() Create a cross-browser directional background gradient
#gradient > .vertical-three-colors() Create a cross-browser three-color background gradient
#gradient > .radial() Create a cross-browser radial background gradient
#gradient > .striped() Create a cross-browser striped background gradient
#gradientBar() Used for buttons to assign a gradient and slightly darker border

Example

Border Radius
// LESS
.example {
    .border-radius(5px);
}
// Compiled CSS
.example {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
Box Shadow
// LESS
.example {
    .box-shadow(0 0 5px black);
}
// Compiled CSS
.example {
    -webkit-box-shadow:0px 0px 5px black;
    -moz-box-shadow:0px 0px 5px black;
    box-shadow:0px 0px 5px black;
}
Gradients
// LESS
.example {
    #gradient > .vertical (#000000,#333333);
}
// Compiled CSS
.example {
    background-color: #000000;
    background-image: -moz-linear-gradient(top,#000000, #333333;
    background-image: -ms-linear-gradient(top,#000000, #333333;
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#000000, #333333;
    background-image: -webkit-linear-gradient(top,#000000, #333333;
    background-image: -o-linear-gradient(top,#000000, #333333;
    background-image: linear-gradient(top,#000000, #333333;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000, #333333;
}

This is a partial listing, for the entire mixins library, see the mixin.less file located in /wp-content/themes/pagelines/less/.

Example

In the example below, we will be using the Masthead section, and using the gradient and border radius mixins. The standard Masthed section looks like this:

Using Google Chrome's web dev tools to inspect the Masthead section, we can indentify the correct class(es), needed to override the sections default CSS.

.masthead {
    position: relative;
    margin-bottom: 65.1px;
}

By using the the LESS mixins.border-radius(); and #gradient > .vertical(), we can add a gradient background with a border radius to the masthead with just a few lines of code.

#site .masthead {
    #gradient > .vertical(#05F, #09F);
    .border-radius(8px);
    padding: 20px;
}

We will also add some padding: 20px; just to give our header, text and buttons some space, the end result looks like this:

As you can see, with just three lines of LESS CSS, we have created a browser compatible customization. If we were to use standard CSS, our custom CSS would look like this:

#site .masthead {
    background-color: #008FBE;
    background-image: -moz-linear-gradient(top, #08A, #09D);
    background-image: -ms-linear-gradient(top, #08A, #09D);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08A), to(#09D));
    background-image: -webkit-linear-gradient(top, #06F, #09F);
    background-image: -o-linear-gradient(top, #08A, #09D);
    background-image: linear-gradient(top, #08A, #09D);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088aa', endColorstr='#0099dd', GradientType=0);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 20px;
}