关于less

最新推荐文章于 2022-09-20 10:27:29 发布

lucky芬

最新推荐文章于 2022-09-20 10:27:29 发布

阅读量354

点赞数

分类专栏： H5和Css3

本文链接：https://blog.csdn.net/daimomo000/article/details/77854824

版权

H5和Css3 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.在sublime安装less相关插件，ctrl+shift+p->install Package->less

或者通过npm安装 npm install less -g(前提是电脑已经安装了node.js)

2.下载koala.exe软件，将建好的.less文件拖入，右键->设置路径，保存为同名.css

页面引用.css，编辑.less，.css会与之同步

下面将一些less语法记录到style.less中

@charset "utf-8";
//变量
@test_width:300px;
.box{
	width: @test_width;
	height: @test_width;
	background-color: yellow;
}
//混合
.border_02(@border_width){
	border:solid yellow @border_width;
}
.test_hunhe{
	.border_02(30px);
}
.border_03(@border_width:10px){
	border:solid green @border_width;
}
.test_hunhe1{
	.border_03();
}
//混合
.border_radius(@radius:5px){
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	border-radius: @radius;
}
.radius_test{
	.border_radius();
	.border_radius(10px);
}

//匹配模式
//相当于js中的if

//写三角模板
.triangle(top,@w:5px,@c:#ccc){
	border-width: @w;
	border-color:transparent transparent @c transparent;
	border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: @c transparent transparent transparent;
	border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
	border-width: @w;
	border-color:transparent @c transparent transparent;
	border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent transparent transparent @c;
	border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){
	width: 0;
	height: 0;
	overflow: hidden;
}
.sanjiao{
	.triangle(right,20px,red);
}

//匹配模式-定位
.pos(r){
	position: relative;
}
.pos(a){
	position: absolute;
}
.pos(f){
	position: fixed;
}
.pipei{
	width: 200px;
	height: 200px;
	background: green;
	.pos(a);
}

//运算 
@test_01:300px;
.box_02{
	width:(@test_01 - 20)*5;
	color: #ccc-10;
}
//嵌套规则
/* 
.list{}
.list ul{}
.list ul li{}
.list ul li span{}
 */
.list{
	width: 600px;
	margin:30px auto;
	list-style: none;
	li{
		height: 30px;
		line-height: 30px;
		background-color: pink;
		margin-bottom: 5px;
		padding:0 10px;
	}
	a{
		float:left;
		//&代表它的上一层选项
		&:hover{
			color: red;
		}
	}
	span{
		float:right;
	}

}

//@arguments变量 包含了所有传递进来的参数 用的不多
.border_arg(@w:30px,@c:red,@xx:solid){
	border:@arguments;
}
.test_arguments{
	.border_arg(40px);
}
//避免编译、!important以及总结
/* 避免编译 */
.test_03{
	width:calc(300px-30px);
	width:~'calc(300px-30px)';
}
//important
.test_important{
	.border_03()!important;
	.border_radius()!important;
}