LESS Syntax - logaegae/project_study GitHub Wiki

To use LESS Elements

Simply add the @import rule in your LESS stylesheet, but don’t forget to download it first and add it into your working directory.

@import "elements.less";

Variables

The variables will allow you to store a constant value that later can be reused in the entire style-sheet.

ex>
@color-base: #2d5e8b;
.class1 {
    background-color: @color-base;
}

Mixins

In LESS, You can use Mixins to reuse whole declarations in a CSS rule set in another rule set

ex>

If set .gradients like this:

.gradients {
    background: #eaeaea; 
    background: linear-gradient(top, #eaeaea, #cccccc);
    background: -o-linear-gradient(top, #eaeaea, #cccccc); 
    background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
    background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
    background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
}

And use the .gradients in another set like this:

div {
    .gradients;
    border: 1px solid #555;
    border-radius: 3px;
}

then

div {
    background: #eaeaea; 
    background: linear-gradient(top, #eaeaea, #cccccc);
    background: -o-linear-gradient(top, #eaeaea, #cccccc); 
    background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
    background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
    background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
    border: 1px solid #555;
    border-radius: 3px;
}

Nested Rules

ex>
nav {
    height: 40px;
    width: 100%;
    background: #455868;
    border-bottom: 2px solid #283744;
    li {
        width: 600px;
        height: 40px;
        a {
            color: #fff;
            line-height: 40px;
            text-shadow: 1px 1px 0px #283744;
        }
    }
}

#Psuedo-class You can also assign pseudo-classes, like :hover, to the selector using the ampersand (&) symbol.

ex>
a {
    color: #fff;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
    &:hover {
        background-color: #000;
        color: #fff;
    }
}

Operation

You can also perform operations in LESS, such as addition, subtraction, multiplication and division to numbers, colors and variables in the style-sheet.

@height: 100px
 
.element-A {
    height: @height;    
}
.element-B {
    height: @height * 2;
}

Scope

LESS applies the Scope concept, where variables will be inherited first from the local scope, and when it is not available locally, it will search through a wider scope.

ex>

header {
    @color: black;
    background-color: @color;
    nav {
        @color: blue;
            background-color: @color;
        a {
                color: @color;
        }
    }
}

then <a> is blue, <nav> is blue, <header> is black
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️