一.Less
Less是一个CSS预处理器, Less文件后缀是less
扩充了CSS语言,使CSS 具备一定的逻辑性、计算能力
但是浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件
使用需在vscode中下载插件easy less:
在less文件中书写代码保存会自动生成对应的css文件
二.Less注释
单行注释:
语法: // 注释内容
快捷键: ctrl + /
块注释:
语法: / 注释内容/
快捷键: shift + alt + A
注意:单行注释只在less文件中可见,在生成的css中不可见
三.Less计算
运算:
加、减、乘直接书写计算表达式
除法需要给整体表达式添加小括号或 使用 ./
例子如下:
四.Less嵌套
作用:快速生成后代选择器
注意:&不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用
示例1(图一二为less文件,图三为生成的css文件):
示例2:
less文件:
生成的css文件:
五.Less变量
变量:存储数据,方便使用和修改
语法:
定义变量:@变量名值
使用变量:CSS属性:@变量名
类似宏定义,以这个变量为属性值的所以子元素当需要修改时直接修改less变量名的值就行,使用时直接用变量名
例子如下:
六.Less导入与导出
less文件能导入另外一个less文件,less文件的导出路径也可以改变
1.Less导入
开发网站时,网页引入公共样式可以通过less导入生成相应网页的总css文件,在html中只需引入该文件,从而减少css文件的引入次数
语法: @import"文件路径";
2.Less导出
控制less文件生成的css文件的存放路径
如果设置的导出路径不存在,那么会自动生成对应文件夹与文件
方法一:
配置EasyLess插件,实现所有Less有相同的导出路径
配置插件 :设置一>搜索Easy Less 一>在setting.json中编辑一>添加代码: “out”:“文件路径” (注意,必须是双引号)
例子(文件夹需加/):
方法二:
直接在要改变生成css文件的存放路径的less文件中的第一行添加代码:
//out: 文件路径
注意此时不用加双引号
例子:
3.Less禁止导出
不一定所有less文件都要导出定义css文件,比如基础样式与公共样式
那么可以设置在对应less文件设置禁止导出
运用如下: