Less语言特性 - 函数
2021-06-15 本文已影响0人
张中华
LESS 映射具有值操作的 JavaScript 代码，并使用预定义的函数来操纵样式表中的 HTML 元素。 它提供了操作颜色的几个功能，如圆函数，floor 函数，ceil 函数，百分比函数等。
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。
这个就类比在学习编程语言的时候，无论基于C/C++/C#/Java/JS还是别的语言，都会提供一些系统内置的基础对象方法，便于开发使用。less也不例外，唯一不好的地方就是没有对象的概念，只能直接调用方法。
示例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="./index.less" />
<script src="../../less.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content">
this is content.
</div>
</div>
</body>
</html>
index.less
@fontSize: 10px;
@width: 0.5;
.container {
font-size: @fontSize * 2; // 20px
background-color: yellow;
width: percentage(@width);
}
这里使用的是内置的percentage函数，更多函数可参考：更多的函数
