less介绍

less,,解决了css本身非常智障难用的问题

安装

直接创建.less文件,然后vscode里安装一下easy less

语法

变量

@bgcolor: #78f;
#fa {
  background-color:@bgcolor;
}

嵌套

#fa {
  width: 200px;
  height: 200px;
  background-color:@bgcolor;
  div {//可以直接在后面加标签名或者类名
    width: 20px;
    height: 20px;
    background-color: #f78;
  } 
  #app {//加可以选择id
    background-color: @bgcolor;
  }
  &:hover {//以上两种默认选择的是后代选择器,如果要用伪类选择器的话需要加&符号
    background-color: white;
  }
  #app::before {
    content: "hhh";
  }
  #app {
    &::before {
      content: "123";
    }
  }//这两种写法可以达到相同的效果,但是后面的这种写法优先级高一点
}

运算

less支持+,-,*,/四种运算

注意:

  • 运算符左右两侧要加空格
  • 如果运算符两侧仅有一个有单位,那么最终单位就是这个单位
  • 如果运算符两侧都有单位,则以第一个为准

坑们


一只菜鸡