Less笔记：
JavaScript代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学无止境,永远对学习保持一种敬畏的态度!</title>
<link rel="stylesheet" type="text/css" href="./css/01.css">
</head>
<body>
<div id="wrap">
<div class="inner"></div>
<div class="inner2"></div>
</div>
</body>
</html>Less样式代码：
// less变量
@c-pink: pink;
@mgn: margin;
@wrap: #wrap;
// 混合
.juzhong(@width: 10px, @height: 10px, @color: skyblue){
width: @width;
height: @height;
background: @color;
// less中的嵌套规则
// 注意点：一定要加&，否则会编译成父子关系，使用&:表示平级
&:hover{
background: @c-pink;
}
}
* {
padding: 0;
@{mgn}: 0;
}
/* 这是我想给用户看的注释 */
// 这是给程序员看的注释
@{wrap} {
width: 500px;
height: 500px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid skyblue;
.inner {
.juzhong(100px , 100px, red);
}
.inner2 {
.juzhong(@color: gray);
}
}
// less中唯一有一点逻辑的地方：变量的延迟加载（看作用域）
@var: 0;
.wzh-1{
@var: 1;
.wzh-2 {
@var: 2;
three: @var; // 3
@var: 3;
}
one: @var; // 1
}
// less中的嵌套规则
// 注释
// 变量 @开头
// @c-pink: pink; color: @c-pink;
// @wrap: #wrap; @{wrap} {}
// @margin: margin; @{margin}: auto;
// 场景：同一个大盒子下两个一模一样的小盒子，小盒子代码重复，如何复用？ 混合即可高效解决
// less普通混合 ： juzhong()
// 混合的样式会在css文件内显示
// less不带输出混合： .juzhong()
// 混合的样式只在less文件内显示（给混合名字后面加上小括号即可，调用时也要加小括号）
// 带参数并且带默认值的混合 .juzhong(x, y) 俗称mixin
// 只需要在 .juzhong(@width, @height, @color)
// 1、调用时需要接收形参
// 2、并且需要默认值
// 命名参数混合
// 1、调用 .juzhong()函数时，它需要传三个参数，如果你只想要传参一个参数的话，就需要给参数命名；
// 2、命名参数这样使用: .juzhong(@color: black) 这样既可，如果不给参数命名，它会将颜色的值赋值到width宽度上去；
// arguments变量 实参列表 具有length属性的对象叫做伪数组
// .juzhong(@w, @line, @color) { border: @arguments}
// less计算： 加减乘除 计算时只需要一方带单位即可
.wzh-1{ width: (100 + 100px)}
// 避免编译：像我们css中计算的一个方法calc，
// 因为它是浏览器自带的方法，它是会被自动识别并编译的，
// 所以我们不需要再让less去编译它，我们就可以使用 ~'' 将calc计算包起来，就会避免less编译这行计算样式
.lv{
margin: 0;
padding: ~'calc(100 + 100px)';
}