less
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html{
/*CSS原生也支持变量的设置,维护使用起来很方便*/
--color:antiquewhite;/*变量名是color*/
--length:100px;
}
.box1{
width: var(--length);
height: 100px;
background-color:var(--color);
}
.box2{
width: 100px;
height: 100px;
color:var(--color);
}
.box3{
/*calc()计算函数*/
width: calc(1000px/2);
height: 100px;
border: 10px solid var(--color);
}
</style>
<body>
<!--
less是一门CSS的预处理语言,
less是css的增强版,通过less编写更少的代码,实现更强大的样式
在less中国添加了许多的新特性,对变量的支持,对mixin的支持
less增添了许多对css的扩展
-->
<!-- .box$*3 -->
<div class="box1">aaa</div>
<div class="box2">aaa</div>
<div class="box3">aaa</div>
</body>
</html>
less如何使用
/*以less的形式在写css*/
// body{
// background-color: antiquewhite;
// }
/*多行注释,而且会被解析到css文件中*/
.box1{
background-color: aquamarine;
.box2{
background-color: rgb(250, 201, 142);
}
.box3{
background-color: orange;
}
}
//变量,在变量中可以存储一个任意的值
//并且我们可以在需要是,任意的修改变量中的值
//变量的语法:@变量名
@a:100px;
@b:orange;
@c:box6;
.box5{
//使用变量时,如果是直接使用,直接 @变量名 使用就可以
width: @a;
background-color: @b;
}
.@{c}{//作为类名或者一部分名使用时,必须以 @{变量名} 的形式使用
width: 100px;
// background-image: url(box6/1.png);
background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;
//就近原则,所以d是300px
div{
height: @e ;
width: $height;
}
@e:100px;
//可以在变量声明前就使用变量
父元素和扩展
.box1{
//后代元素选择器写法
.box2{
background-color: aqua;
}
//子元素选择器写法
>.box3{
background-color: bisque;
&:hover{
color: black;
}
}
//为box1设置hover效果
//&表示外层的父元素
&:hover{
background-color: orange;
}
}
.p1{
width: 200px;
height: 200px;
}
//对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
color: antiquewhite;
}
.p3{
//直接对指定的样式进行引用,就相对于对p1的样式进行了复制
.p1();
}
//使用类选择器可以在后面加一个括号,这个时候已经不是选择器了,我们实际上就创建看一个mixins
.p4{
width: 200px;
height: 100px;
background-color: bisque;
}
.p5{
.p4();
}
对比图:
混合函数
//混合函数 在混合函数中可以直接设置变量
.test(@w,@h,@bgcolor){
//还可以指定默认值,可以不传值,使用默认值之
//.test(@w:100px,@h,@bgcolor){
width: @w;
height: @h;
border: 10px @bgcolor solid;
}
div{
//调用混合函数,按顺序传递参数
.test(200px,300px,red);
}
span{
//可以取颜色的平均值
color: average(red,yellow);
}
//将body hover的时候,对颜色进行加深,使用darken函数
body:hover{
background-color: darken(#bfa,50%);
}
less与css的位置
//引入其他less的样式,可以直接在这个less使用
//@import "other.less"
.box1{
//在less中,所有的数值都可以直接计算
width: 100px+100px;
height: 200px-50px;
background-color: antiquewhite;
color: aliceblue;
}
//配置完成后,我在网页调试的时候可以找到less在哪里