当前位置 博文首页 > 小丞同学：LESS语法学习笔记

最大化 缩小

    小丞同学：LESS语法学习笔记

    作者：[db:作者] 时间：2021-07-06 21:47

    LESS

    通过编写less文件来快速生成css文件，对css的语法进行了扩展

    Less语法

    1. 注释

    单行注释不会被编译，多行才会被编译

    1. 变量

    less：定义变量用@

    scss：定义变量用$

    @num: 100px;
@color: red;
@mar: margin;
.box {
    width: @num;
    height: @num;
    background-color: @color;
    @{mar}: 100px auto;
}

// 代码解析后
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 100px auto;
}

    less会有变量提升，sass没有

    1. 选择器支持嵌套
    • 伪类,嵌套在里面写
    &:hover {
        background-color: skyblue;
}
    1. 运算
    @num: 100px;
.box {
    width: @num + 10px;
    height: @num + 100px;
    background-color: skyblue;
}

    如果单位不一样时，则以前面的单位来计算

    在sass中变量单位不一致时，不能计算

    1. 函数
    .box {
    background-color: skyblue;
    width: round(3.6px);//四舍五入
    height: percentage(0.2);//20%
    padding: sqrt(25px);//5px
}
    1. 混入

    相当于复制temp里的内容到box里

    .temp {  /*.temp() {}这样不会被单独解析 */
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
.box {
    .temp;
}

    带括号被混入的部分不会被单独解析，像上面这种情况temp就会被单独解析

    1. 命名空间
    #space() {
    .test {
        background-color: skyblue;
        color: red;
    }
}
.box {
    #space.test;
}
    1. 继承
    .line {
    font-size: 30px;
    color: 20px;
}
.box {
    &:extend(.line);//继承line的属性
    background-color: skyblue;
}
    1. 条件判断，循环
    .getname(@cn) when(@cn > 4) {
    width: 100px + @cn;
}//如果cn>4执行
.getname(@cn) when(@cn < 4) {
    width: 10px + @cn;
}
.box {
    .getname(3);
}
    1. 导入
    @import 'test.less';
    滚动吸附

    父盒子添加

    scroll-snap-type: x mandatory;

    子盒子添加

    scroll-snap-align: start;//start center end

    滚动时会自动吸附

    cs
    上一篇：小丞同学：Canvas
    下一篇：没有了