less的使用

最新推荐文章于 2024-09-16 16:16:58 发布

苦涩2020

最新推荐文章于 2024-09-16 16:16:58 发布

阅读量404

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css less

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/109171433

CSS3 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了Less预处理器的三大核心特性：变量使用@{}进行插值，通过extend实现选择器继承，以及丰富的内置函数，帮助提升CSS编写效率和可维护性。

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

less 变量和插值

less变量插值使用@{}表示

// less变量
@c: #e4393c;

// less变量插值使用@{}表示

// 选择器变量插值
@b: box;

// 路径变量插值
@imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

// 属性变量插值
@bgsize: background-size;

// -----------------------------------
// .box{
//   width: 200px;
//   height: 200px;
//   border: 2px solid @c;
//   text-align: center;
//   line-height: 200px;
//   background: url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png') no-repeat 0 0;
//   background-size: contain;
// }

.@{b}{
  width: 200px;
  height: 200px;
  border: 2px solid @c;
  text-align: center;
  line-height: 200px;  
  background: url("@{imgUrl}") no-repeat 0 0;
  @{bgsize}: contain;
}

less-extend 继承

// less-extend 继承

.content{
  width: 300px;
  height: 100px;
}

// 继承一个选择器
.main:extend(.content){
  background-color: #f00;
}

// 加入一个规则集中
.list{
  // & 表示它的上一层选择器list
  &:extend(.content);
  &:extend(.a .b);// 匹配嵌套选择器
  border-radius: 20px;
  background-color: #ddd;
  margin-top: 30px;
}

// 嵌套选择器
.a{
  .b{
    border: 3px solid #0f0;
  }
}

less 函数

// less 函数
.box{
  width: 300px;
  height: 100px;
}

.main1{
  .box;//调用.box函数，没有参数可以不写 ()
  background-color: red;
  margin-top: 50px;
}

.main2{
  .box();//调用.box函数
  background-color: green;
  margin-top: 50px;
}

// ---------------less函数有参数-----------------------
.box2(@w: 100px, @h: 200px){//有默认参数
  width: @w;
  height: @h;
}
.boxshadow(@bc){//无参数函数
  box-shadow: 0px 0px 13px 1px @bc;
}

.main3{
  .box2();//有默认参数
  .boxshadow(orange);//无默认参数
  background-color: blue;
  margin-top: 50px;
}