浏览器端使用less

最新推荐文章于 2023-01-04 15:34:03 发布

nayi_224

最新推荐文章于 2023-01-04 15:34:03 发布

阅读量641

点赞数 1

分类专栏： less 文章标签： less

本文链接：https://blog.csdn.net/nayi_224/article/details/102549228

版权

less 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

官网地址

http://lesscss.cn/

下载

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

使用

编辑一个简单的less文件。

test.less

@base: #f00;

.ccc{
    color: @base
}

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

更多用法见：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>

效果
在这里插入图片描述
另一种声明式的写法

<!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

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

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

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

显示编译后的css代码
使用谷歌浏览器运行后直接F12，可以查看编译后的css
在这里插入图片描述
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
在这里插入图片描述
通过lessc命令生成css文件

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

nayi_224

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器端使用less

文章目录官网地址下载使用官网地址http://lesscss.cn/下载点击***Download Source Code***（下载源码）后得到zip文件，解压后放入项目中。使用编辑一个简单的less文件。test.less@base: #f00;.ccc{ color: @base}@base是设置了一个变量，将类ccc的颜色设为红色。更多用法见：http...
复制链接

扫一扫