LESS第六课(内置函数 层级结构 继承()注意是extend，不是extends)
LESS第六课(内置函数 层级结构 继承()注意是extend，不是extends)
贵哥的编程之路
发布于 2020-10-28 15:27:56
发布于 2020-10-28 15:27:56
文章被收录于专栏：用户7873631的专栏
/* 由于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 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
// 列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@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); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
*/
// 字符串
/*
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
*/
// 判断类型
/*
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(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 通道相乘，然后除以255
multiply(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>
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/07/23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
