介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
less
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
1\less是css的预处理语言
- less是css的增强,通过less编写更少的代码实现更强大的样式
- 在less中添加了许多的新特性,像对变量的支持,对minin的支持
- less的语法大体上和css语法一致的,但是less增添了许多对css的扩展
html{
/*css原生也支持变量的设置*/
--color:#bfa
}
.box1{
width:100px;
height:100px;
/* 使用变量 */
background-color:var(--color)
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
style.less
body{
width:100px;
height:100x;
div{
color:red;
}
}
less语法
syntax.less
// less中的单行注释,注释中的内容不会被解析到css中
/*
css中的注释,内容会被解析到css中
*/
.box1{
background-color:#bfa
.box2{
background-c0lor:#ff0
.box4{
color:red
}
}
.box3{
background-color:orange
}
}
1、 变量,在变量中可以存储任意一个值
并且可以在需要时,任意修改变量中的值
变量标志,@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
1、使用变量时,如果直接使用则以@变量名的形式使用即可
width:@a;
}
2、作为类名使用,或者一部分值使用时,必须以@{变量名}的形式使用
.@{c}{
width:200px;
background-image:url("@{c}/1.png")
}
@d:200px;
@d:300px;
div{
3、 变量发生重名时,会优先使用比较近的变量
@d:115px;
width:@d;
height:@e
}
4、 可以在变量声明前就使用变量
@e:15px;
div{
width:300px;
5、直接引用width的值
height:$width;
}
.box1{
.box2{
color:red
}
1、子元素选择器
>.box3{
color:orange
}
2、为box1设置一个hover
& 就表示外层的父元素
&:hover{
color:orange
}
div &{
color:red
}
}
.p1{
width:100px;
height:200px;
}
3、扩展,对我们当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
color:red
}
.p2{
width:100px;
height:200px;
color:red
}
.p3{
4、 直接对指定的样式进行引用,这里相当于将p1的样式在这里进行了复制
mixin 混合
.p1()
}
5、使用类选择器可以在选择器后添加一个括号,这时我们实际上就创建了一个
mixins
.p4(){
width:100px;
height:100px;
bacground-color:#bfa
}
混合函数
1、混合函数 在混合函数中可以直接设置变量
可以指定默认值
.test(@w:100px,@h:200px){
width:@w;
height:@h;
border:1px solid red;
}
div{
// 调用混合函数,按照顺序传递参数
.test(200px,100px);
// 按照名字写好
.test(@bg-color:red,@h:100px,@w:300px);
}
span{
// 取两个颜色的平均
color:average(red,blue)
font-size:average(100px,300px)
}
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
background-color:bfa
}
body:hover{
// 加深颜色 50%
background-color:darken(#bfa,50%)
}
less补充
1、import用来将其它less引入当前less
import syntax.less
.box1{
2、在less中所有的数值都可以直接进行运算
// + - * /
width:100px+100px
height:100px-50px;
}