LESS

Posted 2020-12-16 tab15

Less简介

http://lesscss.cn/

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

 Less安装

先安装nodejs    >  https://nodejs.org/en/download/

检查nodejs是否安装成功 ,  windows命令行窗口  node -v

通过npm在线安装less, windows命令行窗口  npm install -g less

检查less是否安装成功，windows命令行窗口 lessc -v

 Less变量

/* 文件名.less */

/*less变量   @变量名:值;  */
/*变量定义*/
@color:red;

body {
  /*变量使用*/
  background: @color;
}

Less编译  

将less文件通过编译器生成对应的css文件

vscode插件: Easy LESS ,安装完毕重启vscode，只要保存一下less文件就会自动生成对应的css文件

Less嵌套

子元素样式直接写在父元素里面就可以了

内层选择器没有&符号，会被解析为父元素的后代。如果有&符号，会被解析为父元素自身或父元素的伪类。

.parent {
   width: 100px;
   height: 100px;
   .son {
      color: red;
   }
   &:hover {
      color: blue;
   }

}

Less运算

运算符左右两边需保留一个空格。

对于两个不同单位的值进行运算，运算结果取第一个值的单位。

如果两个值之间只有一个值有单位，则取该值的单位。

@baseFont: 14px;
html {
  font-size: @baseFont;
}

div {
  width: 70rem / @baseFont;
  height: 70rem /@baseFont;
}

a {
    font-size: @baseFont - 2;
    &:hover {
        font-size: (@baseFont + 2) * 2;
    }
}