less
- css的预编译语言,浏览器本身是不支持less的,所以需要将less转成css
- less只是为了开发方便用的
- VScode安装Easy Less插件:当创建好.less文件,vscode会自动识别这样的文件,将其编译成css;
css : 让css具有编程语言的特点; 预编译css;浏览器是不识别less语言的;所以需要用js解析less;或者是直接将less转成css文件,然后进行引用;
less : 预编译的语言 类似的有sass
Less只用于开发,不用于上线;在项目上线之前,把less改写成css,然后最后还是把css上线
解决css的层级和嵌套问题;
1.解决了css编译的权重问题;
2.让less具有编程语言的特点;
// less中定义的变量还存在变量提升的特点;
//1. 定义变量
@w:100px;
// 2. 变量定义公共的图片路径
// images
@URL:"../images/";
// 定义的变量,如果私有作用域存在,就不再向上查找了;
.box{
@w:300px;
width:@w;
.box1{
height:@w;
background:url("@{URL}1.jpg");
}
.box2{
background:url("@{URL}2.jpg");
}
}
//3. 函数的封装
//4. 如果在类名后面加上小括号,那么就不再进行编译了;
.public() //可以看做函数,不进行编译
.public //可以看做类
.public(@a){
width:@a;
height:100px;
}
.box{
.public(@a:200px);
}
.public{
width:300px;
height:500px;
}
//5. &: 连接符;
//6. &:extend(.public);//继承属性
.box{
width:100px;
&:hover{
background:red;
}
&-box1{
width:99px;
}
//.public; 冗余的代码比较多;
&:extend(.public);//继承属性
}
//mix : 可以有判断条件;
.layout(@a) when(@a<100){
background: red;
}
.box{
.layout(990)
}