首先需要一个.less文件,和css的不同点是
1.@变量名:值;
例如: @size:16px;
less中的变量存在作用域,声明在选择器外部的就是全局变量,声明在选择器内部的就是局部变量。
2.Mixin混入
方便复用样式,可以调用重复样式的类或者id
3.Less运算符
在计算时可以直接使用运算符来计算,使用除法时需要使用表达式括起来(10/2),+-*不需要
4.Less嵌套
在less中可以使用父子嵌套的方式来写样式
像伪类 伪元素 和交集这一类选择器,在嵌套时需要在前面使用&,不使用的话编译后前面会有一个空格。div:hover的选择器;如果不加&的话,编译后会成为div空格:hover。
引入less的方式:
可以使用@import来引入其他less文件
1.@import url(xxx.less)
2.@import 'xxx.less'
(less后缀可以省略,建议不要省略)
Less编译:
需要将less编译成css在运行(HTML中运行不了less文件)
在vscode中下载一个插件(easy LESS)可以编译less文件