/*
由于less的底层就是用JavaScript实现的,
所以JavaScript中常用的一些函数在less中都支持
*/
不想介绍，因为太他妈多了。。。。
你们自己看把.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>11-less中的内置函数</title><link rel="stylesheet" href="css/11-less中的内置函数.css">
</head>
<body>
<div></div>
<script>/*由于less的底层就是用JavaScript实现的,所以JavaScript中常用的一些函数在less中都支持*/// 混杂方法/*image-size("file.jpg"); // => 100px 50pximage-width("file.jpg"); // => 100pximage-height("file.jpg"); // => 50px// 单位转换convert(9s, "ms"); // => 9000msconvert(14cm, mm); // => 140mmconvert(8, mm); // => 8// 列表@list: "A", "B", C, "D";length(@list); // => 4extract(@list, 3); // => C*/// 数学/*ceil(2.1); // => 3 向上取整floor(2.1); // => 2 向下取整percentage(.3); // => 30% 转百分比round(1.67, 1); // => 1.7 四舍五入，保留一位小数点sqrt(25cm); // => 5cm 取平方根abs(-5cm); // => 5cm 取绝对值pi(); // => 3.141592653589793 圆周率πmax(3px, 42px, 1px, 16px); // => 42pxmin(3px, 42px, 1px, 16px); // => 1px*/// 字符串/*replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"*/// 判断类型/*isnumber(56px); // => true 是否含数字isstring("string"); // => trueiscolor(#ff0); // => trueiscolor(blue); // => trueiskeyword(keyword); // => trueisurl(url(...)); // => trueispixel(56px); // => trueisem(7.8em); // => trueispercentage(7.8%); // => trueisunit(4rem, rem); // => true 是否为指定单位isruleset(@rules); // => true 是否为变量*/// 颜色操作/*增加饱和度saturate(color, 20%)减少饱和度desaturate(color, 20%)增加亮度lighten(color, 20%)减少亮度darken(color, 20%)降低透明度fadein(color, 10%)增加透明度fadeout(color, 10%)设置绝对不透明度(覆盖原透明度)fade(color, 20%)旋转色调角度spin(color, 10)将两种颜色混合，不透明度包括在计算中。mix(#f00, #00f, 50%)与白色混合tint(#007fff, 50%)与黑色混合shade(#007fff, 50%)灰度，移除饱和度greyscale(color)返回对比度最大的颜色contrast(color1, color2)*/// 颜色混合/*每个RGB 通道相乘，然后除以255multiply(color1, color2);与 multiply 相反screen(color1, color2);使之更浅或更暗overlay(color1, color2)避免太亮或太暗softlight(color1, color2)与overlay相同，但颜色互换hardlight(color1, color2)计算每个通道(RGB)基础上的两种颜色的平均值average(color1, color2)*/</script>
</body>
</html>
//层级结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/*在哪里加&,代表了它以及上级都不是后代，其他的是哈,举例:*//*后代有空格才是后代哈*//*.father{width: 300px;height: 300px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);.son{&:hover{background: skyblue;}width: 200px;height: 200px;background: blue;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}&::before{content: "子元素";display: block;background: yellowgreen;width: 100px;height: 100px;}}*///编译后的/*.father {width: 300px;height: 300px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.father .son {width: 200px;height: 200px;background: blue;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.father .son:hover {background: skyblue;
}
.father::before {content: "子元素";display: block;background: yellowgreen;width: 100px;height: 100px;
}*//*.father{width: 300px;height: 300px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);.son{:hover{background: skyblue;}width: 200px;height: 200px;background: blue;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}::before{content: "子元素";display: block;background: yellowgreen;width: 100px;height: 100px;}}*///编译后的后代选择器/* .father {width: 300px;height: 300px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.father .son {width: 200px;height: 200px;background: blue;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.father .son :hover {background: skyblue;
}
.father ::before {content: "子元素";display: block;background: yellowgreen;width: 100px;height: 100px;
}
*/</style>
</head>
<body><div></div>
</body>
</html>
继承：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/*.center{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.father:extend(.center){width: 300px;height: 300px;background: red;.son:extend(.center){width: 200px;height: 200px;background: blue;}}*///编译后的
.center,
.father,
.father .son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
.father {width: 300px;height: 300px;background: red;
}
.father .son {width: 200px;height: 200px;background: blue;
}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
