Less语法整理01

闲下来想了解,索性记录一下

变量@

1.样式变量

@color: #000	// 定义
color:@color	// 使用

2. 样式名变量

@my-name:color;
.ad{
	background-@{my-name}:#000;
}

3.选择器变量

@banner: portal-banner;
.@{banner}{
	width:100%;
}

4.变量拼接

@base-url:”/images/”
.ad{
	background-image:url(“@{base-url}ad.jpg”);
}

父选择器&

a{
	color:333;
	&:hover{};				// 输出:a:hover{}
	&-button{};				// 输出: .a-button{}
	&:hover, &-button{};	// 输出:a:hover,a-button{}
	&+ &-button{};			// 输出:a + a-button{}; 与a同级相邻的a-button
	span &{};				// 输出:span a{}
}

嵌套

.content{
	margin-top: .24rem;
ul.new-list{
	box-shadow: 0 0 10px rgba(0,0,0,.1)
	li{
	font-size:.14rem;
	}
}
}

继承extend

.master-color{
color:#000;
}
.title{
&:extend(.master-color);
}

合并属性+ +_

1.+合并后用逗号分隔

.box-merge(){
	box-shadow+: inset 0 0 10px #555;
}
.box{
	box-shadow+: inset 1px 1px 20px #333;
}
// 输出
.box{
	.box-merge();
	box-show+: inset 0 0 10px #555, inset 1px 1px 20px #333;
}

2.+_合并后用空格隔开

.box-merge(){
	transform+_:scale(2)
}
.box{
	.box-merge();
	trasnform+_:rotate(15deg);
}
// 输出
.box{
	transform: scale(2) rotate(15deg);
}

混合

1.带小括号

// 定义
// 括号中,冒号左侧为参数名,冒号右侧为参数默认值
.f(@f1:left,@w:200px;@h:300px){
	float:@f1;
	width:@w;
	height:@h;
}
// 使用
.left{
	.f();
}
.right{
	.f(right;300px;400px);
}
// 优先使用这个混淆
.left{
.f() !important;
}

2.>只使用混合中的部分选择器

.master-mix(){
	.sub{
	font-size: .12rem;
	}
}
.sub-title{
	// 以下三种写法
	.master .sub();
	.master-mix.sub();
	.master-mix > .sub();
}

3.@arguments输出所有参数

.bs(@x:0,@y:0;@blur:1px;@color:#000){
	box-shadow:@arguments;
}
.box{
	.bx(10px);
}
// 输出
.box{
	box-shadow:10px 0 1px #000;
}

@sizes:{
	content:8rem;
	Sub:2rem;
}
.subnav{
	@media (min-width:@sizes[sub]){
		display:block;
	}
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
LESS和SCSS都是一种基于CSS之上的高级语言,它们都提供了更多的功能和特性,可以大大提高代码编写的效率。LESS语法相对来说更加清晰明了,容易上手。而SCSS在功能上更加强大,支持条件语句等高级特性。 LESS语法示例: 1. 变量声明:使用@符号来声明变量,例如:@color: #333; 2. 混合器:使用.mixin来定义和使用代码块的片段,可以实现代码的复用,例如:.mixin { font-size: 14px; color: #333; } 3. 嵌套规则:可以在父选择器内嵌套子选择器,简化了选择器的书写,例如:.parent { .child { color: red; } } 4. 运算:可以对数值进行加减乘除等运算,例如:@width: 100px + 50px; 5. 导入文件:可以使用@import语句导入其他LESS文件,例如:@import "variables.less"; SCSS语法示例: 1. 变量声明:使用$符号来声明变量,例如:$color: #333; 2. 混合器:使用@mixin来定义和使用代码块的片段,可以实现代码的复用,例如:@mixin mixin { font-size: 14px; color: #333; } 3. 嵌套规则:可以在父选择器内嵌套子选择器,简化了选择器的书写,例如:.parent { .child { color: red; } } 4. 运算:可以对数值进行加减乘除等运算,例如:$width: 100px + 50px; 5. 导入文件:可以使用@import语句导入其他SCSS文件,例如:@import "variables.scss"; 总结来说,LESS和SCSS在语法上有一些细微的差异,但整体上非常相似,都提供了类似的功能和特性,具体使用哪一种语法主要取决于个人喜好和项目需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [less和scss的区别](https://blog.csdn.net/Jadon_z/article/details/126750935)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [LESS 和 SCSS 的区别](https://blog.csdn.net/sky89299/article/details/124484021)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值