二十九、移动适配之使用 less 运算写法完成 px 单位到 rem 单位的转换(2)

498 阅读2分钟

Less 简介

px 单位转换到 rem 单位 的过程中,除法运算是最麻烦的,因为 CSS 不支持计算写法,我们需要自己计算完之后,再将结果写到 CSS 样式里面,这样做太浪费时间了,我们可以通过 Less 来实现,less 语法可以快速编译生成 CSS 代码。

Less 是一个 CSS 预处理器 ,后缀名是 .less ,它扩充了 CSS 语言,使 CSS 具备了一定的逻辑性、计算性。

但要 注意,浏览器不识别 Less 代码,目前阶段,网页要引入对应的 CSS 文件。

推荐一款比较好用的 Less 编译插件 Easy Less ,它是 VS Code 插件,在 扩展 里边搜索就可以找到它:

image.png

直接点击 安装 就可以了,它的作用是:less 文件保存后自动生成 css 文件

先来体验一波:

image.png

Less 语法

(1)注释、计算

less 的注释有两种,单行注释(//)和多行注释 /**/,单行注释无法生成到 CSS 文件中

运算:加、减、乘运算,直接写计算表达式即可;除法 需要添加 小括号. ,如果表达式存在多个单位,以第一个单位为准。

image.png

(2)嵌套

使用 less 嵌套写法,可以快速生成后代选择器

image.png

& 表示 当前选择器 ,不生成后代选择器,通常配合 伪类或伪元素 使用,方便代码迁移。

image.png

(3)变量

网页中的文字颜色基本都是统一的,如果网站改版,变换文字颜色,就要逐一修改属性值,这样做才繁琐了,也不利于维护。

对于这种情况,我们可以把颜色提前存储到一个容器,然后设置属性值为这个容器的名称。

设置 变量 存储数据,方便使用和修改,语法:

  • 定义变量:@变量名:值;
  • 使用变量:CSS 属性:@变量名;

image.png

(4)导入其他 less 文件

开发网站时,通常网页需要引入公共样式,CSS 用 link 标签引入;less 则用 导入 法:@import "文件路径" 引入其他 less 文件。

示例:如果是 less 文件,可以省略 less 后缀

image.png

(5)使用 less 语法导出 css 文件

1> 配置 EasyLess 插件,实现所有 Less 有相同的导出路径

设置 中,搜索要配置的插件(Easy Less),然后再打开 在 settings.json 中编辑 ,添加如下代码即可:注意必须是 双引号

image.png

image.png

以上的导出路径是安装插件时,自动配置的,我们也可以根据自己的需求修改:

image.png

2> 控制当前 Less 文件导出路径

给 less 文件第一行添加如下代码,就可以控制当前文件的导出路径,注意在文件夹名称的后面要添加 /

image.png

image.png

3> 禁止导出

有时候 less 并不需要导出,这时可以在 less 文件的第一行添加 //out:false

image.png