less安装

素颜马尾好姑娘i 2022-10-08 15:23 179阅读 0赞

官网地址：[https://less.bootcss.com/\#%E6%A6%82%E8%A7%88][https_less.bootcss.com_E6_A6_82_E8_A7_88]

看官网推荐如此就可以使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]

**例子：**

下面是一个简单的LESS示例。

**hello.htm**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet/less" type="text/css" href="style.less" />
            
            <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
        </head>
        <body>
            <h1>Welcome to W3Cschool</h1>
    		<h3>Hello!!!!!</h3>
        </body>
    </html>

**style.less**

@primarycolor: #FF7F50;
    @color:#800080;
    h1{
    color: @primarycolor;
    }
    h3{
    color: @color;
    }

然而一直不行，说是跨域了，就把sytle.less内容放在html中

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            
            <style type="text/less">
            	@primarycolor: #FF7F50;
    			@color:#800080;
    			h1{
    				color: @primarycolor;
    			}
    			h3{
    				color: @color;
    			}
            </style>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
        </head>
        <body>
            <h1>Welcome to W3Cschool</h1>
    		<h3>Hello!!!!!</h3>
        </body>
    </html>

![20210622115835982.png][]

[https_less.bootcss.com_E6_A6_82_E8_A7_88]: https://less.bootcss.com/#%E6%A6%82%E8%A7%88
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/b424d8aa9a654c42af77369ec1d0fdc1.png
[20210622115835982.png]: /images/20221005/9014db40245b4492ba15ac3172256039.png