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