CSS(三）less一篇搞定

目录

一、less

1.1什么是less

1.2Less编译

1.3变量

1.4混合

1.5嵌套

1.6运算

1.7函数

1.8作用域

1.9注释与导入

---

一、less

1.1什么是less

   我们写了这么久的CSS,里面有很多重复代码，包括通配颜色值、容器大小。那我们能否通过js声明变量来解决这些问题？原生的css不支持，但less支持。css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

注意：

• 浏览器不认识less，写的less代码，需要编译成css让浏览器识别。
• 再项目，通常我们都是用预处理语言

1.2Less编译

安装node

安装less         npm install -g less

编译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变量

• less允许使用@符号定义变量，声明less变量的格式@变量名：变量值
• 选择器的名字也可以使用变量声明
• url地址使用变量

less

@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扩展名，则可以将扩展名省略掉。