浏览器端使用less

素颜马尾好姑娘i 2021-09-23 09:08 306阅读 0赞

### 文章目录 ###

*   *   *  官网地址
         *  下载
         *  使用

### 官网地址 ###

[http://lesscss.cn/][http_lesscss.cn]

### 下载 ###

点击\*\*\*Download Source Code\*\*\*（下载源码）后得到zip文件，解压后放入项目中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]

### 使用 ###

编辑一个简单的less文件。

test.less

@base: #f00;
    
    .ccc{ 
        color: @base
    }

@base是设置了一个变量，将类ccc的颜色设为红色。

更多用法见：[http://lesscss.cn/functions/][http_lesscss.cn_functions]

编辑html页面

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet/less" type="text/css" href="test.less" />
    	<script type="text/javascript"> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: { }, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script>
    	
    	<script src="/HtmlTest/js/less.js-2.5.3/dist/less.js" type="text/javascript" charset="utf-8"></script>
    	
    	</head>
    	<body>
    		<div class="ccc">1111111111</div>
    	</body>
    </html>

效果  
![在这里插入图片描述][20191014154141372.jpg]  
另一种声明式的写法

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	
    	<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="test.less">
    	<script src="/HtmlTest/js/less.js-2.5.3/dist/less.js" type="text/javascript" charset="utf-8"></script>
    	
    	</head>
    	<body>
    		<div class="ccc">1111111111</div>
    	</body>
    </html>

写法上要简介一些，只是官方给出的例子实在有些少  
配置项文档：[http://lesscss.cn/usage/\#using-less-in-the-browser-setting-options][http_lesscss.cn_usage_using-less-in-the-browser-setting-options]

顺带一提，官方给出的例子时这个

先加载js，后加载less。反正我是不知道怎么让它运行起来。

显示编译后的css代码  
使用谷歌浏览器运行后直接F12，可以查看编译后的css  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]  
dumpLineNumbers属性可以改变输出的内容，暂时没发现有什么实质上的区别。

> dumpLineNumbers  
> Type: String Options: ‘’| ‘comments’|‘mediaquery’|‘all’ Default: ‘’  
> When set, this adds source line information to the output css file. This helps you debug where a particular rule came from.  
> The comments option is used for outputting user-understandable content, whilst mediaquery is for use with a firefox extension which parses the css and extracts the information.  
> In the future we hope this option to be superseded by sourcemaps.

命令行生成css文件  
准备好npm环境（没有的可以直接下载nodejs），安装less  
`npm install less -g`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]  
通过lessc命令生成css文件

`lessc 文件.less > 文件.css`  
![在这里插入图片描述][20191014171930272.jpg]  
在线编译地址  
[http://lesscss.cn/usage/\#online-less-compilers][http_lesscss.cn_usage_online-less-compilers]  
更多第三方编译工具  
[http://lesscss.cn/usage/\#third-party-compilers][http_lesscss.cn_usage_third-party-compilers]

[http_lesscss.cn]: http://lesscss.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/45c861d47e234909b9a0151bb4b7cc1c.png
[http_lesscss.cn_functions]: http://lesscss.cn/functions/
[20191014154141372.jpg]: /images/20210923/6c5bd053a859429181a1c59ead1a4f4d.png
[http_lesscss.cn_usage_using-less-in-the-browser-setting-options]: http://lesscss.cn/usage/#using-less-in-the-browser-setting-options
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]: /images/20210923/15b087bed81440aebb8cc154acb44ce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]: /images/20210923/d8fbef72ca464d2c88eaefdc65e5bdd7.png
[20191014171930272.jpg]: /images/20210923/08885b3333aa4cc09a766611e4a17484.png
[http_lesscss.cn_usage_online-less-compilers]: http://lesscss.cn/usage/#online-less-compilers
[http_lesscss.cn_usage_third-party-compilers]: http://lesscss.cn/usage/#third-party-compilers