LESS جایگزینی قدرتمند برای CSS

@color-base: #FF5951
.majidonline{
    background-color: @color-base;
}

.majidonline{
    background-color: #FF5951;
}

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="less.min.js"></script>

npm install -g less

lessc style.less style.css

.class1 {
    background-color: #FF5951;
}
.class2 {
    background-color: #fff;
    color: #FF5951;
}
.class3 {
    border: 1px solid #FF5951;
}

@maincolor: #FF5951;
 
.class1 {
    background-color: @maincolor;
}
.class2 {
    background-color: #fff;
    color: @maincolor;
}
.class3 {
    border: 1px solid @maincolor;
}

@mainsize: 1.2em;
@half-ghost: 0.5;

.gradients {
    background: #ff5951;
    background: linear-gradient(top, #ff5951, #3a3a3a);
    background: -o-linear-gradient(top, #ff5951, #3a3a3a);
    background: -ms-linear-gradient(top, #ff5951, #3a3a3a);
    background: -moz-linear-gradient(top, #ff5951, #3a3a3a);
    background: -webkit-linear-gradient(top, #ff5951, #3a3a3a);
}

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

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

.circled( @radius: 5px ) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

p{
    .circled;
}

p{
    .circled(10px);
}

@import "elements.less";

div {
    .rounded(3px);
}

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

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;
        }
    }
}

a {
    color: #ffffff;
    background-color: #ff5951;
    &:hover {
        background-color: #ff5951;
        color: #3a3a3a;
    }
}

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

@h1Size: 5em;

h1 { font-size: @h1Size; }
h2 { font-size: @h1Size * .8; }
h3 { font-size: @h1Size * .6; }
h4 { font-size: @h1Size * .4; }
h5 { font-size: @h1Size * .2; }

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