1 嵌套
类似于html的结构,通过嵌套,来表现父子级关系,不建议嵌套过多层(包含选择器:不推荐超过三层)
.box{
.nav{
border: 1px solid #000;
}
}
1.1 & —— 父选择器
用于给嵌套父级加伪类
.clearfix{
&:after{
content: '';
display: block;
clear: both;
}
}
.box{
.warp &{
width: 200px;
}
}
----------------------------------
.warp .box {
width: 200px;
}
1.2 深入嵌套-命名空间
加括号后将不会被编译成css语句,类似于函数
只会在调用的时候编译,可节省网站流量
#box1(){
background: red;
.fonts(@size:12px){
font-size: @size;
}
}
.box2{
#box1.fonts(20px);
}
--------------------------------------
.box2 {
font-size: 20px;
}
这一定要指明 xx 下面的.fonts ,因为作用域不一样,不可以直接 .fonts
2 变量
语法 [ @变量名:变量值; ]
@w:100px;
.box{
width:@w;
}
图片地址 变量
作为插入到一部分内容的变量,要包含在{}
:@{变量名}
@imgurl:"../images";
.box1{
background: url('@{imgurl}/1.jpg');
}
.box2{
background: url('@{imgurl}/2.jpg');
}
.box3{
background: url('@{imgurl}/3.jpg');
}
选择器 变量
@box:box_one;
.@{box}{
width: 100px;
}
特点
- 变量的声明不是必须在使用前
- 变量名同作用域下不能重复,否则会被更改掉(后者覆盖前者)
- 作用域,less中,是有作用域的,作用域会影响当前的变量,在什么范围内是有效的,是否会替换
3 混合
概念:将一个定义好的class A引入到另一个class B中,从而简单实现class B继承class A中的所有属性
无参数混合
box{
height: 200px;
background: red;
}
.content{
.box; //也可以是 .box()
}
传参混合
.box(@a,@b){
height: @a;
background: @b;
}
.content{
.box(200px,red);
}
这种方式,对于数值方面更加自由,但是也有缺点,加了()的那个样式,会发现在css中没有出现。而且,如果使用的时候,不传入参数,会编译失败,这时候我们可以设置默认值
默认值传参混合
.box(@a:200px,@b:red){
height: @a;
background: @b;
}
.content{
.box;
}
arguments
用于收集并传递括号中所有参数
.border(@w:2px,@s:solid,@c:red){
border: @arguments;
}
.box{
.border;
}
4 运算
.box{
width:800px - 50 * 2;
height:800px - 50 * 2;
padding:50px;
}
运算符使用注意事项(加减乘除)
- 运算符的左右,都保留空格
- 运算的时候,最好包裹在()内
- font 复合样式容易有问题:/ 的使用
- 当运算数值具有单位时,需要注意:
- 一个单位:最终结果根据唯一的这个单位
- 两个单位:为第一个单位
5 继承
直接调用继承:继承包括子元素样式
.box{
width: 200px;
height: 200px;
.a{
color: red;
}
}
.box1{
.box;
}
---------------------------------
.box {
width: 200px;
height: 200px;
}
.box .a {
color: red;
}
.box1 {
width: 200px;
height: 200px;
}
.box1 .a {
color: red;
}
extend:只继承父级
.box{
width: 200px;
height: 200px;
.a{
color: red;
}
}
.box1:extend(.box){
}
和混合的最终结果是一样的,但是在显示上面是有差别的,这里最终的显示会用群组选择器,另外,继承不能使用参数
6 判断
.box(@w) when(@w>0){
width:@w;
}
.box1{
.box(40px);
}
与:and
.box(@w,@h) when (@w>0) and (@h>0){
width: @w;
height: @h;
}
.box1{
.box(100px,0px);
}
或: ,
.box(@w,@h) when (@w>0), (@h>0){
width: @w;
height: @h;
}
.box1{
.box(100px,0px);
}
---------------------------------------
.box1 {
width: 100px;
height: 0px;
}
非:not
.box(@w,@h) when not (@w=100){
width: @w;
height: @h;
}
.box1{
.box(100px,120px);
}
7 合并
- 允许对可以接受多个属性的,例如:背景、阴影进行拼接合并
利用,
隔断的,使用+
.box(){
width: 200px;
height: 200px;
box-shadow+: 10px 10px 5px #000;
}
.box2{
.box();
box-shadow+: inset 5px 5px 5px red;
}
--------------------------------------------
.box2 {
width: 200px;
height: 200px;
box-shadow: 10px 10px 5px #000,
inset 5px 5px 5px red;
}
利用空格
隔断的,使用+_
.box(){
width: 200px;
height: 200px;
transform+_: translate(100px);
}
.box2{
.box();
transform+_: rotate(3600deg);
}
---------------------------------------------------
.box2 {
width: 200px;
height: 200px;
transform: translate(100px) rotate(3600deg);
}
8 映射
- 从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
---------------------------------------------------
.button {
color: blue;
border: 1px solid green;
}
@size:{
max:1200px;
mid:800px;
min:500px;
}
.box{
width: @size[max];
}
9 其他常用操作:
导入less文件Importing —— @import "lib.less";
相当于直接复制less文件中的代码,极大节省HTTP请求
注释//
双斜杠注释方式不会编译到css文件里,所以在less里注释吐槽项目经理就不会被发现啦!
避免编译 —— ~:~'/'
/
将直接翻译成字符串传入css