LESS语法学习笔记

LESS

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

Less语法

注释

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

变量

less：定义变量用@

scss：定义变量用$

代码语言：javascript复制

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

选择器支持嵌套

伪类,嵌套在里面写

代码语言：javascript复制

&:hover {
        background-color: skyblue;
}

运算

代码语言：javascript复制

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

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

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

函数

代码语言：javascript复制

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

混入

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

代码语言：javascript复制

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

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

命名空间

代码语言：javascript复制

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

继承

代码语言：javascript复制

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

条件判断，循环

代码语言：javascript复制

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

导入

代码语言：javascript复制

@import 'test.less';

滚动吸附

父盒子添加

代码语言：javascript复制

scroll-snap-type: x mandatory;

子盒子添加

代码语言：javascript复制

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

滚动时会自动吸附

编程算法 sass css 打包

0 人点赞