Less使用案例

最新推荐文章于 2023-07-03 16:44:59 发布

技术与健康

最新推荐文章于 2023-07-03 16:44:59 发布

阅读量1.7k

点赞数

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Practicer2015/article/details/44958149

版权

先上 less文件

@charset "utf-8";
@import "reset.css";
@import "classes.less";
@import "buttons.css";

html,body{height:100%;}

body{
	background:#fffff;	
	<strong>.rainbow-gradient(-45deg,#ff0000,#ffb600,#fff600,#a5ff00,#00a9ff,#0400ff,#8a00fc, #ff00e9, #ff0059);</strong>
	}
a:link,a:visited{
	color:#4a4a4a;text-decoration:none;
	}
a:hover,a:active{color:#7b7b7b};

.rainbow-gradient(@deg:0deg,
			@c1:red,
			@c2:orange,
			@c3:yellow,
			@c4:green,
			@c5:blue,
			@c6:pink,
			@c7:purple,
			@c8:pink,
			@c9:red
			


){
     background-image:linear-gradient(@deg,@c1 0%, @c1 11%, 
						@c2 11%, @c2 22%, @c3 22%s,@c3 33%,@c4 33% ,@c4 44%,@c5 44% 
						,@c5 55%,@c6 55%,@c6 66%,@c7 66%,@c7 77%, @c8 77%,@c8 88%,
						@c9 88%, @c9 100%);
     background-image:-moz-linear-gradient(@deg,@c1 0%, @c1 11%, 
						@c2 11%, @c2 22%, @c3 22%s,@c3 33%,@c4 33% ,@c4 44%,@c5 44% 
						,@c5 55%,@c6 55%,@c6 66%,@c7 66%,@c7 77%, @c8 77%,@c8 88%,
						@c9 88%, @c9 100%);
	

}

使用CDN<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script> 本机地址“file://开头"无法解析，需要在本地搭建服务器,解析后如下代码

<link href="less/style.less" rel="stylesheet/less">
<style id="less:begin-less-style" type="text/css">
@charset "utf-8";
@import "http://127.0.0.1/less/reset.css";
@import "http://127.0.0.1/less/buttons.css";
---------------------------------------------------------------- */
html,
body {
height: 100%;
}
body {
background: #fffff;
<strong>background-image: linear-gradient(-45deg, #ff0000 0%, #ff0000 11%, #ffb600 11%, #ffb600 22%, #fff600 22% s, #fff600 33%, #a5ff00 33%, #a5ff00 44%, #00a9ff 44%, #00a9ff 55%, #0400ff 55%, #0400ff 66%, #8a00fc 66%, #8a00fc 77%, #ff00e9 77%, #ff00e9 88%, #ff0059 88%, #ff0059 100%);
background-image: -moz-linear-gradient(-45deg, #ff0000 0%, #ff0000 11%, #ffb600 11%, #ffb600 22%, #fff600 22% s, #fff600 33%, #a5ff00 33%, #a5ff00 44%, #00a9ff 44%, #00a9ff 55%, #0400ff 55%, #0400ff 66%, #8a00fc 66%, #8a00fc 77%, #ff00e9 77%, #ff00e9 88%, #ff0059 88%, #ff0059 100%);</strong>
}
a:link,
a:visited {
color: #4a4a4a;
text-decoration: none;
}
a:hover,
a:active {
color: #7b7b7b;
}
</style>