Less的使用
文章目录
- 什么是less
- css预处理器
- 为什么使用less
- 如何使用Less
- Less语法学习
- 注释
- 运算
- 嵌套
- 变量
- 导入
- 导出
- 禁止导出
- less在开发中的使用
- 准备工作
- 头部布局
什么是less
LESS是一种CSS预处理器，扩展了CSS的功能。
css预处理器
我们知道我们的浏览器只认识html，css,js这些语言。而我们的less语言浏览器并不认识。所以我们得在我们的代码给浏览器之前进行一个预先的处理，把less转换为浏览器认识的css。这就是css预处理器。
类似的css预处理器还有Sass
为什么使用less
有人会说less这么麻烦还有预先处理为什么要用它呢？
这就不得不提到css的缺点了：
- 冗余度高：重复属性值需手动书写，难以复用。
- 缺乏逻辑性：不支持变量、函数等动态特性，难以实现条件判断或循环。
- 维护困难：全局样式的修改需逐个查找替换，模块化程度低。
下面来介绍less的优势。
- 减少冗余度：重复属性值不需手动书写。
- 支持折叠代码，方便整理：可折叠几十行甚至更多。再也不用鼠标滑轮滚到冒烟了。
- 注释嵌套：css无法嵌套注释，less可以。
- 模块化开发：通过变量和混合实现代码复用，提升可维护性。
- 增强功能：支持运算、嵌套、函数等编程特性，减少重复代码量。
- 兼容性：编译后生成标准CSS，兼容所有浏览器。
- 方便移动端开发：详情请看我之前发表的博客==>移动web开发
如何使用Less
我们上面说到浏览器不认识css，我们如何把less转换成给浏览器认识的css呢？
答：VS Code 插件：Easy LESS。只要我们ctrl+S保存 less文件后自动生成对应的 CSS 文件
Less语法学习
注释
- 单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
- 块注释
- 语法：/* 注释内容 */
- 快捷键： Shift + Alt + A
// 单行注释
/* 这是less，当我们ctrl+S保存时，只有块注释转换成css，单行注释不会转换成css
这是块注释
允许换行
*/
/*
这是块注释
允许换行
*/
运算
- 加、减、乘直接书写计算表达式
- 除法需要添加 小括号 或 .
- 表达式存在多个单位以第一个单位为准
.box {
// 左边.less文件 后面的注释是生成的.css文件
width: 100 + 20px; // width: 120px;
width: 100 - 80px; // width: 20px;
width: 100 * 2px; // width: 200px;
// 除法 / → (计算表达式) 或 ./ → 推荐（）
// 注意使用./会有报错，但是仍然可执行。所以推荐使用(), ()不会报错
width: 68 / 37.5rem; // width: 68 / 37.5rem;
width: (68 / 37.5rem); // width: 1.81333333rem;
width: 29 ./ 37.5rem; // width: 0.77333333rem;
// 如果表达式有多个单位，最终css里面以第一个单位为准
// 这里输出的单位就是px
height: (29px / 37.5rem); // height: 0.77333333px;
}
嵌套
作用：快速生成后代选择器
提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用
.father {
color: red;
.son {
width: 200px;
a {
color: green;
// & 表示的是当前选择器，代码写到谁的大括号里面就表示谁 → 不会生成后代选择器
// 应用：配合hover伪类或nth-child结构伪类使用
&:hover {
color: blue;
}
}
// a{ &:hover { color: blue;} } 相当于下面的写法。
// a:hover {
// color: blue;
// }
}
}
对应的css如下。
.father {
color: red;
}
.father .son {
width: 200px;
}
.father .son a {
color: green;
}
.father .son a:hover {
color: blue;
}
变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
- 定义变量：@变量名: 数据;
- 使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}
导入
作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：
- 如果是 less 文件可以省略后缀
- 注意写完一定一定要加分号; 不然报错
// 这是 index.less 文件
@import './base.less';
@import './common';
导出
写法：在 less 文件的第一行添加 // out: 存储URL
注意：
- 文件夹名称后面添加 /
- 导出的直接就是css文件了。
// 这是 14-less-导出.less 文件
// 注意加了out: 就不在是注释的意思了，而是导出。
// 将14-less-导出.less 导出到 和14-less-导出.less文件同级的index.css文件中
// out: ./index.css
// 将14-less-导出.less 导出到 和14-less-导出.less文件同级的mycss文件夹下的index.css文件中
// out: ./mycss/index.css
禁止导出
写法：在 less 文件第一行添加: // out: false
// out: false
使用场景：如下图，base.less 和 common.less就不需要生成同名的.css文件，只需要生成index.css就行。因为我们已经将base.less 和 common.less导入到了index.less中了，只需要生成index.css，html页面就可以直接使用了。
less在开发中的使用
准备工作
- 记得设计稿的尺寸调整为 @2x
-
项目目录：将素材里面的assets，iconfont, js, less 复制出来，再去新建index.html并在less新建index.less 写入如下代码
// out: ../css/index.css @import "./base";
- HTML 结构
<link rel="stylesheet" href="./iconfont/iconfont.css">
<!-- 这里的css是less生成的-->
<link rel="stylesheet" href="./css/index.css">
<body>
......
<script src="./js/flexible.js"></script>
</body>
- less 样式
// out: ../css/
@import "./base";
头部布局
- HTML 结构
<!-- 头部 -->
<header>1</header>
- less 样式
// 头部
header {
display: flex;
justify-content: space-between;
padding: 0 (15 / @rootSize);
height: (44 / @rootSize);
background-color: pink;
line-height: (44 / @rootSize);
}