LESS语法学习笔记

LESS

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

Less语法

1. 注释

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

2. 变量

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没有

3. 选择器支持嵌套

• 伪类,嵌套在里面写

&:hover {
        background-color: skyblue;
}

4. 运算

@num: 100px;
.box {
    width: @num + 10px;
    height: @num + 100px;
    background-color: skyblue;
}

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

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

5. 函数

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

6. 混入

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

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

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

7. 命名空间

#space() {
    .test {
        background-color: skyblue;
        color: red;
    }
}
.box {
    #space.test;
}

8. 继承

.line {
    font-size: 30px;
    color: 20px;
}
.box {
    &:extend(.line);//继承line的属性
    background-color: skyblue;
}

9. 条件判断，循环

.getname(@cn) when(@cn > 4) {
    width: 100px + @cn;
}//如果cn>4执行
.getname(@cn) when(@cn < 4) {
    width: 10px + @cn;
}
.box {
    .getname(3);
}

10. 导入

@import 'test.less';

滚动吸附

父盒子添加

scroll-snap-type: x mandatory;

子盒子添加

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

滚动时会自动吸附

---