What is LESSCSS? how to use?

What is LESSCSS

LESSCSS is a dynamic style language, which is a type of CSS preprocessing language. It uses a syntax similar to CSS and gives CSS a dynamic language. Features, such as variables, inheritance, operations, functions, etc., make it easier to write and maintain CSS.

LESSCSS can be used in multiple languages ​​and environments, including browsers, desktop clients, and servers.

Quick preview of language features:

Variables:

Variables allow us to define a series of common styles separately, and then call them when needed. So when making global style adjustments, we may only need to modify a few lines of code.

LESS source code:

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

Compiled CSS:

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

Mixins

Mixing can easily introduce a defined class A into another class B, thereby simply realizing that class B inherits all attributes in class A. We can also call it with parameters, just like using a function.

LESS source code:

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

Nesting

We can Nesting one selector within another selector to implement inheritance greatly reduces the amount of code and makes the code look clearer.

LESS source code:

Nesting

We can nest one selector within another selector to achieve inheritance, which greatly reduces the amount of code, and The code looks clearer.

LESS source code:

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

Function and operation

Operation Provides addition, subtraction, multiplication, and division operations; we can perform operations on attribute values ​​and colors, so that complex relationships between attribute values ​​can be realized. Functions in LESS map one-to-one JavaScript code, allowing you to manipulate property values ​​if you wish.

LESS source code:

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 is the detailed content of What is LESSCSS? how to use?. For more information, please follow other related articles on the PHP Chinese website!