introcuding less css with less.js, using webcompiler ext

2024-02-18 15:15•css•阅读 657

1.html [watch out for the !js load sequence and the attribute of !rel stylesheet/less!]

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="styles/lesspractitioner.less" type="text/css" rel="stylesheet/less" />
    <script src="styles/less.js"></script>

</head>
<body>
    show less compiled
    <div class="box">
        box
    </div>
</body>
</html>

　　2.less code

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
    -webkit-box-shadow: @style @c;
    box-shadow: @style @c;
}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @alpha));
}

.box {
    background-color: @base;
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);

    div {
        .box-shadow(0 0 5px, 30%)
    }
}