less
less是css代码的一种预处理器,css预处理器还有 sass,stylus
less是一门css的一种预处理语言,它扩展了css语言的,增加了变量,Mixin、函数等特性,它使css更易维护和扩展
less 是跑在node平台上的
在vscode上使用easy-less
- 下载安装插件
- 在扩展设置中选择 settings.json
- 配置:
"less.compile": {
"compress": false,
"sourceMap": false,
"out": true,
"outExt": ".css"
}
less注释
// :
在less中 //是不解析到css文件中去的
// :
在less中 //是可以解析到css文件中去的
less中变量
-
定义变量在一般在less文件的开头书写,
使用@符号开始,例如: -
变量是属性值:
@color:pink;
使用:
blackgroundcolor:@color; //这里背景显示为pink色 -
变量是属性
@w:width;
使用:
@{w}:100px; //这里的宽度显示为100px -
变量是选择器
@selector:#box;
使用:
@{selector}{
width:100px;
height:100px;
} -
变量的延迟加载
在less中变量会等这一个模块加载完全之后去找变量的值
@var: 0;
.class{
@var: 1;
.brass{
@var: 2;
three: @var; //3
@var: 3;
}
one: @var; // 1
}
less中的嵌套规则
- 1、基本嵌套规则
- 2、&使用:
当嵌套在里面时,可以使用 & 来提升选择器的层级关系
.div{
.class{
width:100px;
height:100px;
&:hover{
blackgroundcolor:yellow;
}
}
}
可以得到
.div .class{
width:100px;
height:100px;
}
.div .class:hover{
width:100px;
height:100px;
bgc:yellow;
}
less中的混合
混合就是将一系列属性从一个规则引入到另一个规则集的方式
1、普通混合
.test{
width:100px;
height:100px;
bgc:yellow;
font-size:20px;
font-wiegth:400;
}
.class{
width:500px;
height:500px;
.div1{
.test
}
.div2{
.test
}
}
2、不带输出的混合模式
.test(){
width:100px;
height:100px;
bgc:yellow;
font-size:20px;
font-wiegth:400;
}
.class{
width:500px;
height:500px;
.div1{
.test();
}
.div2{
.test();
}
}
3、带参数的混合
.test(@w,@h,@b,@fz){
width:@w;
height:@h;
bgc:@b;
font-size:@fz;
font-wiegth:400;
}
.class{
width:500px;
height:500px;
.div1{
.test(100px,100px,yellow,24px);
}
.div2{
.test(90px,30px,red,30px);
}
}
4、含有默认参数的混合
.test(@w,@h,@b,@fz:24px){
width:@w;
height:@h;
bgc:@b;
font-size:@fz;
font-wiegth:400;
}
.class{
width:500px;
height:500px;
.div1{
.test(100px,100px,yellow);
}
.div2{
.test(90px,30px,red,30px);
}
}
5、命名参数
.test(@w,@h,@b:yellow,@fz:24px){
width:@w;
height:@h;
bgc:@b;
font-size:@fz;
font-wiegth:400;
}
.class{
width:500px;
height:500px;
.div1{
.test(100px,100px,yellow);
}
.div2{
.test(90px,30px,@fz:40px);
}
}
6、匹配模式
// 第一个参数是匹配符
.test(R,@w,@h,@b:yellow,@fz:24px){
width:@w;
height:@h;
bgc:@b;
font-size:@fz;
font-wiegth:400;
float:right;
}
.test(L,@w,@h,@b:yellow,@fz:24px){
width:@w;
height:@h;
bgc:@b;
font-size:@fz;
font-wiegth:400;
float:left;
}
.class{
width:500px;
height:500px;
.div1{
.test(R,100px,100px,yellow);
}
.div2{
.test(L,90px,30px,@fz:40px);
}
}
7、同名混合
//
.test(@_,@w,@h,@b){
width:@w;
height:@h;
bgc:@b;
font-size:@fz;
font-wiegth:400;
}
.test(R,@w,@h,@b:yellow,@fz:24px){
float:right;
}
.test(L,@w,@h,@b:yellow,@fz:24px){
float:left;
}
.class{
width:500px;
height:500px;
.div1{
.test(R,100px,100px,yellow);
}
.div2{
.test(L,90px,30px,@fz:40px);
}
}
8、argument
.border(@1,@2,@3){
border:@argument;
}
.class{
.border(1px,solid,black)
}
less运算
.class{
width:(100 + 100px); //widht=200px
}
less 继承属性
.middle{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
#box1{
&:extend(.middle);
width: 500px;
height: 500px;
background:#eee;
#box2{
&:extend(.middle);
width: 300px;
height: 300px;
background-color: skyblue;
#box3{
&:extend(.middle);
width:100px;
height: 100px;
background: red;
}
}
}
得到
.middle,
#box1,
#box1 #box2,
#box1 #box2 #box3 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
#box1 {
width: 500px;
height: 500px;
background: #eee;
}
#box1 #box2 {
width: 300px;
height: 300px;
background-color: skyblue;
}
#box1 #box2 #box3 {
width: 100px;
height: 100px;
background: red;
}
less 防止编译
~"内容"
width:~"calc(100px + 100)"