less常用方法讲解

最新推荐文章于 2025-05-19 09:45:31 发布

guhy fighting

最新推荐文章于 2025-05-19 09:45:31 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端面试题文章标签： less css css3

本文链接：https://blog.youkuaiyun.com/u013994400/article/details/121973448

前端面试题专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Less预处理器的核心特性，包括变量的使用、混合（Mixins）创建可复用代码、嵌套规则提高代码可读性、运算操作增强表达能力，以及calc()函数和函数库的运用。此外，还讨论了作用域规则、注释的添加和文件导入策略，帮助开发者提升CSS编写效率。

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

1、变量

  使用 @ 来定义变量

2、混合（Mixins）

  混合可以将一个定义好的 class A 轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

    .rounded-corners (@radius: 5px) {
	  border-radius: @radius;
	  -webkit-border-radius: @radius;
	  -moz-border-radius: @radius;
	}
	#header {
	  .rounded-corners;
	}
	#footer {
	  .rounded-corners(10px);
	}

3、嵌套（Nesting）

/*或者这样写:*/ 
	#header        { color: black;
	  .navigation  { font-size: 12px }
	  .logo        { width: 300px;
	    &:hover    { text-decoration: none }
	  }
	}

4、运算（Operations）

    @base: 5%;
	@filler: @base * 2;
	@other: @base + @filler;
	
	color: #888 / 4;
	background-color: #112244 + #111;
	height: 100% / 2 + @filler;

5、calc() 特例

    @var: 50vh/2;
	width: calc(50% + (@var - 20px));

6、函数（Functions）

 Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

@base: #f04615;
@width: 0.5;
.class {
  /*percentage百分比函数将0.5转换为50%*/
  width: percentage(@width); 
  /*将颜色饱和度增加5%*/
  color: saturate(@base, 5%);
  /*颜色亮度降低25%并且色相值增加8*/
  background-color: spin(lighten(@base, 25%), 8);
}

标题7、作用域（Scope）

@var: red;
#page {
  @var: white;
  #header {
    color: @var; /*white*/ 
  }
}

8、注释（Comments）

块注释和行注释都可以使用：

标题9、导入（Importing）

@import "lib.less";
@import "lib";
@import "lib.css";