目录:
1.基础知识
2.详解
一、基础知识
在前面less相关插件已经安装好的情况下,我们开始练习相关语法。
- 需求:给body的后代div设置字体颜色为红色。
css写法:
body div {
color: red;
}
less写法:
body{
width: 100px;
height: 100px;
// 在body里面我们还可以随意设置任何属性
//less:body的后代div 设置字体颜色
div{
color:red;
}
}
- 特别注意:通常我们都是创建一个xx.less文件,然后写上样式语法后,保存,他会立马自动在该文件目录下面生成xx.css。
- 而我们使用的是xx.css文件。
如下面:
<head>
<!-- 要用less里面的效果,必须要引入的是对应的css文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box1"></div>
</body>
二、详解(以下都是less语法写法)
-
1.注释
多行注释,在less中写了的多行注释,保持less文件后,自动会在css中继承下来,单行注释不会。 -
2.父子兄弟关系
// 父子兄弟关系
.box1{
background-color: red;
// 给box1的后代设置背景颜色
.box2{
background-color: #ff0;
// box2的后代
.box4{
color:orange;
}
}
// 这里的box2,box3是兄弟关系
.box3{
background-color: #ff0;
}
}
-
3.变量
-
定义变量: @变量名,
用的话: @变量名, 变量不仅可以存数字,颜色,也可以存类名
//作为变量名使用
@num:100px;
@b:#bfa;
@c:box6;
.box5{
width: @num;
}
- 类名使用
// 作为类名使用,或者一部分使用时,:.@{变量名}
.@{c}{
width:@num;
// background-image: url("box6/1.png");
background-image: url("@{c}/1.png");
}
- 就近原则
@d:200px;
@d:300px;
div{
// 用的@d用值是就近原则300px,如果在这里面又写了@d,也是用最近的这个150px
@d:150px;
width:@d;
height:@e;
}
//可以在变量声明前就使用变量
@e:335px;
- 直接引用变量
div{
// 如果我的width和height 都是100px, 我不想重复写,我想让height直接引用width的值, $width
width: 100px;
// height: 100px;
height:$width;
}
- 4.后代,子元素:>, &:父元素
.box1{
.box2{
// 后代是直接写
color:red;
}
>.box3{
//子元素是需要>
color:green;
//&就表示外层的父元素,所以此时是代表box3
&:hover{
color:blue;
}
}
// 为box1设置hover,当你外层也是box1,就不能再里面在写box1,而是用&
//&就表示外层的父元素
&:hover{
color:orange;
}
//&就表示外层的父元素, 这里表示box1
div &{
width:100px;
}
}
- 5.扩展extend
比如有p1, p2两个有相同的width,height,也有不同的color,正常情况下是这样写的。
.p1{
width: 100px;
height: 100px;
}
.p2{
width: 100px;
height: 100px;
color:red;
}
但是我现在不想写重复的width,height. 所以,我用到extend语法来写p2。
表示,p2有p1相同的width,height, 同时在为p2多扩展设置一个color
.p1{
width: 100px;
height: 100px;
}
//:extend 对当前选择器扩展指定选择器的样式(选择器分组),可以通过选择器分组的形式对样式进行扩展
.p2:extend(.p1){
color:yellow;
}
翻译出来的css:
/*
我们可以改写,p2对p1的一个扩展, 就会自动变成选择器分组的样式
.p1,p2{}
*/
.p1,
.p2 {
width: 100px;
height: 100px;
}
.p2 {
color: yellow;
}
6.类似扩展,但比扩展5这里的写法差点:
//这种写法的性能比上面的那种差一点
.p3{
//直接对指定的样式进行引用,这里就相当于把p1的样式在这里进行了复制
//mixin 混合,把p1的样式混合到p3
.p1();
}
上面写法的优化:
优化这种写法,不让他在重复写一次
使用类选择器时,可以在选择器后面添加一个括号,这时我们实际上就创建了一个mixins
/*
你会发现这里加了()后,当没有用到他p4,他不会显示,只有当别人在用到
他的时候,才会显示
*/
.p4(){
width: 100px;
height: 100px;
background-color: #bfa;
}
.p5{
// 引用的时候,可以加(),也可以不加
// .p4();
.p4;
}
7.混合函数用法:
混合函数写法 .xx(){}, 可以在这个混合函数中直接设置变量
// .test(@w,@h,@bg-color){
// width:@w;
// height:@h;
// border:1px solid @bg-color;
// }
.test(@w:100px,@h:200px,@bg-color:red){
width:@w;
height:@h;
border:1px solid @bg-color;
}
div{
// 注意,你的混合函数(括号里面指定几个参数,就必须传几个,而且顺序要对应上)
// .test(200px,300px,#bfa);
// 还可以这样写,如果你不想按照顺序写,就需要写上前面的名字在传值。
// .test(@bg-color:red,@h:100px,@w:300px)
//如果我们确实不想传值,其实我们也可以在设置混合函数方法的时候给他们一个默认值
// 有了默认值,你可以不传,或者只传一个
// .test();
.test(200px);
}
8.颜色的混合
span{
/* 两个数之间取平均数,只能取颜色的平均值 */
color:average(red,yellow);
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
background-color: #bfa;
}
body:hover{
// 在#bfa这个颜色的基础上再加深10%
background-color: darken(#bfa,10%);
}