Less 学习记录

LESS是一种动态样式语言,作为CSS预处理语言之一,它引入了变量、函数、运算、继承等功能,极大提升了CSS的编写效率与可维护性。本文介绍了LESS的基本概念、变量使用方法、混合模式、嵌套规则及清除浮动技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

less是一种动态样式语言,属于css预处理语言的一种,使用类似于css的语法,为css的赋予了动态语言的特性,如变量 函数 运算 继承等,更方便css的编写和维护

less编辑工具koala编译下载地址:点击打开链接

注释:

/**/会被编译到css文件里边
//不会被编译到css文件里边

变量:<Less中声明变量一定要用@符号>

@Width_300:300px;
@Height_200:200px;
.Box{
  width: @Width_300;
  height: @Height_200;
}

混合:

.Padding{padding: 10px;}
.Box{.Padding;}{padding: 10px;}
.Box{.Padding;}

混合模式<带参数>:

.border_A(@border_width){border:@border_width solid #0083ff;}
.Div_A{.border_A(10px);}

混合模式<带默认值>:

.border_A(@border_width:10px){border:@border_width solid #0083ff;}

@arguments,代表所有传进来的参数:

.Border_arg(@Width:10px;@Color:#0083ff;@Form:solid){border: @arguments;}
//改变其中一个变量,其他变量默认不发生改变<保留原值>
.Box{.Border_arg(#F5F5F5);}

Less嵌套中&符号代表上一层选择器:<常用来为元素添加悬浮、点击等状态>

a{
  color: #F5F5F5;
  &:hover{color: #0083ff;}
}

less中的清除浮动:

.clearfix{
  &:after{content:"";display:block;clear:both;}
}

less避免编译用符号~例如: ~‘calc(300px-30px)’,less直接把calc(300px-30px)给到css文件,在被浏览器调用时,浏览器自己运算。

!important 表示样式的优先级别最高

:@_ 意思为不管调用哪种样式块都会加上该样式块的样式。


END

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值