less的语法和屏幕的滚轮效果

1.水平方向的滚动

div {
            display: flex;
            /* 不让文字换行 */
            white-space: nowrap;
            /* 水平滚动条 */
            overflow-x: auto;
        }
        h1 {
            padding: 20px;
        }

2.垂直方向的滚动条

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 100%;
            height: 100px;
            background-color: aqua;
        }

        span {
            display: block;
            height: calc(100vw - 100px);
            background-color: pink;
            /* 垂直方向 */
            overflow-y: auto;
        }
    </style>

3.less的语法

1.嵌套

1.用法

div {
    width: 100px;
    height: 100px;

    h1 {
        width: 100%;
        height: 100%;
        background-color: aqua;
    }

    .box {
        background-color: pink;
    }
    > a {
        color: #000;
        div {
            width: 100px;
            height: 100px;
        }
    }
    
}

2.伪元素的链接符

1.用法：

div {
    &::after{
        content: 'n你好';
    }
}

3.自定义属性的变量

​ 比如颜色、背景颜色、像素等等

2.作用：

可以设置主题颜色 非常好用 主题颜色一改全改

3.用法：

@color: pink;
@background-color: blue;
@fontSize: 16px;
div {
    color: @color;
    background-color: @background-color;
    font-size: @fontSize;
}

4.混合

相对于js的封装一样懂的都懂

用法：

.color() {
    color: pink;
    background-color: aqua;
}
.fontSize() {
    font-size: 14px;
}
.juzhong {
    display: flex;
    justify-content: center;
    align-items: center;
}
.div() {
    width: 100px;
    height: 100px;
}
div {
    .color();
    .fontSize();
    .juzhong();
    .div()
}

6.混合-进阶用法

.color(@color) {
    background-color: @color;
}
div {
    .color(red);
    p{
        .color(pink);
    }
}