浏览器中使用Less

最新推荐文章于 2023-04-28 10:25:01 发布

小钱要努力

最新推荐文章于 2023-04-28 10:25:01 发布

阅读量399

点赞数 1

分类专栏： css 文章标签： less javascript 前端

本文链接：https://blog.csdn.net/qq_43699122/article/details/128549072

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

我们都知道less无法在浏览器中直接使用，浏览器不能直接对其识别

那我就是想在浏览器中使用less呢？应该怎么做？

解决

通过less解析插件less.js（JavaScript插件）把less文件解析成css代码

1.去下载地址下载 dist包下 js 文件并引入自己的项目中

2.less 样式文件一定要在 Less.js之前引入，这样才能保证 .less 文件被正确编译。

html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <link rel="stylesheet/less" type="text/css" href="../css/less.css" />
            //引入less.js文件
            <script src="../js/less.js"></script>
        </head>
        <body>
            hello,less
        </body>
    </html>

less


    @charset "utf-8";
    @baseColor: pink;
    @fontSize: 30px;
    
    * {
        margin: 0;
        padding: 0;
    }
    
    body,
    html {
        width: 100%;
        height: 100%;
        background-color: @baseColor;
        display: grid;
        justify-content: center;
        align-content: center;
        font-size: @fontSize;
    }
    ```