目录
less-toc" name="tableOfContents" style="margin-left:40px">一、less
less-toc" name="tableOfContents" style="margin-left:80px">1.1什么是less
1.2Less编译
1.3变量
1.4混合
1.5嵌套
1.6运算
1.7函数
1.8作用域
1.9注释与导入
less" name="%E4%B8%80%E3%80%81less">一、less
less" name="1.1%E4%BB%80%E4%B9%88%E6%98%AFless">1.1什么是less
我们写了这么久的CSS,里面有很多重复代码，包括通配颜色值、容器大小。那我们能否通过js声明变量来解决这些问题？原生的css不支持，但less支持。css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。
注意：
1.2Less编译
安装node
编译less
方式一 lessc styles.less styles.css
方式二
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net.cn/npm/less" ></script>方式三 下载easyless插件
1.3变量
css">@width:900px;
@height:@width+100px;
@color:skyblue;
@mybanner:banner;
@imgurl:'../image/ad/01/';.@{mybanner}{width: @width;height: @height;background-color: @color;background-image: url('@{imgurl}/0.png');
}
css">.banner {width: 900px;height: 1000px;background-color: skyblue;background-image: url('../image/ad/01//0.png');
}
- 变量可以先使用后声明
1.4混合
- 混合类似函数的思想
- 混合允许一个类的属性用于另一个类，并且包含类名作为其属性。
- 在混和调用后使用！important关键字将它继承的所有属性标记为！important
混合也可以接收参数，这些参数是混合时传递给选择器块的变量
1.5嵌套
-
Less提供了使用嵌套代替层叠与样式结合使用的能力
-
还可以使用此方法将伪选择器与混合一起使用。重写为一个混合(&表示当前选择器的父类
1.6运算
算数运算符加减乘除可以对任何数字、颜色或变量进行运算。如果可能的话，算数运算符在加减或比较之前会对单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。
1.7函数
Less内置了许多函数，常用的这几个，其他的去mdn看。
1.8作用域
Less中的作用域与CSS中的作用域非常相似。首先在本地查找变量和混合，如果找不到，则从父级作用域继承。
与CSS自定义属性一样，混合(mixin)和变量的定义不必在引用之前事先定义。
1.9注释与导入
块注释和单行注释都可以使用
你可以导入一个.less文件，此文件中的所有变量就可以全部使用了。如果导入的文件是.less扩展名，则可以将扩展名省略掉。
