less定义
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
less的编译工具
1kaola
2Visual Studio Code 可以自行安装插件
less中的注释
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中(css和less通用)
less中的变量
1.作为普通属性值只来使用:直接使用@variable
@color:red;
/*@color的值是red*/
/*类似于js中的var申明的变量类似*//*less @color:red; 类似 js var color = red;*/
2.作为选择器和属性名:#@{selector的值}的形式
@{a}:.color;
/*将属性名或者选择器名作为变量要使用@{变量名}:变量名名字;的语法来编写*/
@a{}
/*@a{}等价于.color{}*/
3.作为URL:@{url}
4.变量的延迟加载(和js的作用域类似)
@a:1;
.div{
@a:2;
.span{
@a:3;
.i{
width:@a;//@a = 3;
}
width:@a; //@a = 3;
}
width:@a; //@a = 2;
}
//less的变量延迟有点类似于js中的变量局部的变量向外部依次访问,访问不到则报错;
less中的嵌套规则
1.基本嵌套规则
2.&的使用
.div{
.span{
&:hover{//编译为.span:hover;
}
}
}
less中的混合
定义:混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
//要多次使用的代码
.div{
width:100px;
height:200px;
color:red;
}
.div1{
.div;//复制使用.div内的样式,并且使用
padding:100px;
}
.div2{
.div;//复制使用.div内的样式,并且使用
margin:100px;
}
//这就是less中的混合,他有点类似于js的函数对象,但是less的调用时的功能是会将内部的样式复制给当前
//弊端:当定义的重复使用的样式代码(类似于函数)会被编译到css文件中,大量使用会影响文件的内存大小;
2.不带输出的混合
//要多次使用的代码
.div(){//注意:【div带括号了】
width:100px;
height:200px;
color:red;
}
.div1{
.div;//复制使用.div内的样式,并且使用
padding:100px;
}
.div2{
.div;//复制使用.div内的样式,并且使用
margin:100px;
}
//弊端:会将文件写死,不利于后期开发
//优点:相对于一般混合,不带输出的混合定义的公共内容不会被解析到css文件中。
3.带参数的混合
//要多次使用的代码
.div(@width){//中的形参变量需要申明;(js的变量在函数执行上下文前自动申明变量)
width:@width;
height:200px;
color:red;
}
.div1{
.div(100px);//注意调用混合的规范,带有实参
padding:100px;
}
.div2{
.div;//
margin:100px;
}
//类似于js的实参与形参
//相对于完美
//优点:相对于一般混合,不带输出的混合定义的公共内容不会被解析到css文件中。
4.带参数并且有默认值的混合
//要多次使用的代码
.div(@width,@height,color){//多个变量之间使用(,)逗号隔开
width:@width;
height:@height;
color:@color;
}
.div1{
.div(100px,200px,red);//调用时形参与实参要对应,不然会报错,解决办法,给形参加上默认值
padding:100px;
}
.div2{
.div(200px,300px,black);//
margin:100px;
}
//相对于完美
//优点:相对于一般混合,不带输出的混合定义的公共内容不会被解析到css文件中。
5.带多个参数的混合
//要多次使用的代码
.div(@width,@height,color){//多个变量之间使用(,)逗号隔开
width:@width;
height:@height;
color:@color;
}
.div1{
.div(100px,200px,red);//调用时形参与实参要对应
padding:100px;
}
.div2{
.div(200px,300px,black);//
margin:100px;
}
//相对于完美
//优点:相对于一般混合,不带输出的混合定义的公共内容不会被解析到css文件中。
6.命名参数
7.匹配模式
8.arguments变量
//要多次使用的代码
.div(@solid,@red,@px){
border:@arguments;//适用于这种css简写模式
}
.div1{
.div(solid,red,100px);
padding:100px;
}
9.在less/css中引入另一个文件css文件要使用@import[引入公共文件]
//引入公共文件(外部文件)
@import:"./1.css";