less

http://lesscss.cn/

less是css预编译语言，和其类似的预编译器还有: sass， stylus等，所谓的预编译，其实是把css这种标记语言按照面向对象（编程语言的方式）进行编写（有变量，函数，判断等操作），但是这种写法浏览器是不能正常识别的，需要我们把其再编译为正常的css代码才可以。

嵌套

嵌套写法-告别很多前缀问题

.box {
   
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    overflow: hidden;
}

.box img {
   
    width: 100%;
    height: 100%;
    transition: all 1s;
}

.box:hover img {
   
    transform: scale(1.3);
}

.box {
   
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    overflow: hidden;

    img {
   
        width: 100%;
        height: 100%;
        transition: all 1s;
    }

    &:hover {
   
        img {
   
            transform: scale(1.3);
        }
    }

}

作用域

类似于JS作用域链这套机制

每一个大括号都是一个私有的作用域，在里面用到的变量，先看是否为私有的（是否在当前作用域中声明过和形参变量），不是私有的，找上级作用域中的

@A: lightblue;

.box {
   
    @A: lightgreen;
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 1px solid @A;

    img {
   
        width: 100%;
        height: 100%;
        transition: all 1s;
    }
}

变量

变量一定-样式更改更为灵活轻便，同样便于一些计算

/* 颜色定义为变量 */
@color-red: lightcoral;
/* 图片路径前缀定义为变量 */
@images: "../images";

.box {
   
    @W:100;
    @H:100px;
    margin: 20px auto;
    width: unit(@W,px);
    height: @H;
    border: 1px solid @color-red;
    overflow: hidden;
    /* 可以理解是字符串的拼接 */ 
    background: url("@{images}/bg.png");
   /* @W-20 这样写的话就会被误解为一个变量名 */ 
    img {
   
        /* less中内置的函数，是用来设置或者去除单位的 */ 
        width: unit((@W) - 20,px);
        height: unit(unit(@H,px) - 20,px);
        transition: all 1s;
    }
    /* 嵌套中的连接符，让后面的选择器紧挨着父选择器 &:hover => .box:hover*/ 
    &:hover {
   
        img {
   
            transform: scale(1.3);
        }
    }

}

函数

1. 每一个样式类都可以被充当为一个函数，直接在其它的作用域中调取执行（执行特点：不需要传参时，可以不加小括号），但是这种函数的调用是把原有的代码都原封不动地拿过来一份一摸一样地（包括了其所有的后代样式）。

2. less常用中的内置函数

   • unit
   • darken（颜色变深） lighten（颜色变浅）
     ```less
     .link {
     @BG:lightblue;
     margin: 20px;
     width: 100px;height: 35px;
     border: 1px solid #aaa;
     background : @BG;
     &:hover {
     background: draken(@BG，50%);
     }
     }

   + 

```less
.box2 {
    .box1
}

这样box1就有了和box2一样的样式

继承

基于继承也能够实现样式的共用，但是其不能继承后代样式。

.func_center(@W: 100,@H: 100) {
   
    position: absolute;
    top: 50%;
    left: 50%;
    margin: unit(-@H/2,px) 0 0 unit(-@W/2,px)
}
.box1 {
   
    border: 1px solid red;
}
.box2 {
   
    &:extend(.box1)
    @W: 100;
    @H: 200px;
    .func_center(@W,unit(@H,px));
}

循环

.column-4 {
   
    width: 40%;
}
.column-3 {
   
    width: 30%;
}
.column-2 {
   
    width: 20%;
}
.column-1 {
   
    width: 10%;
}

通过循环可以实现

.loop(@n) when (@n<=4) {
   
    .loop(@n+1);
    .column-@{n} {
   
        width:unit(@n*10,%);
    }
}

谢谢款待

小记整理于 2023 / 8 / 30