Less 学习记录

原创已于 2022-07-04 11:21:31 修改 · 280 阅读

CC 4.0 BY-SA版权

文章标签：

于 2018-05-03 19:15:26 首次发布

2 篇文章

订阅专栏

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