Less知识点总结
目录
一、Css预处理器和Less基本介绍
CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
- Less是一个CSS预处理器, Less文件后缀是.less
- 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
- 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
块注释
- 语法：/* 注释内容 */
- 快捷键： shift + alt + A
二、环境使用总结
1. 在 Node.js 环境中使用
npm i -g less
# or
yarn global add less
# 查看版本，有版本则安装成功
lessc -v
# 成功示例：lessc 4.1.2 (Less Compiler) [JavaScript]- vscode插件
- 作用：less文件保存自动生成css文件
2.在 webpack 中使用
基本步骤：
- 安装
less以及less-loader - 配置
webpack - 如果是
.vue文件要在style标签上增加属性lang="less"
安装：
npm i less less-loader --save-dev
# or
yarn add less less-loader --dev配置 webpack ：
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
};
如果是 Vue.js 的项目则需要增加 style 标签的 lang 属性：
3. 在浏览器环境中使用
在 .html 文件的 head 标签内进行引入：
<head>
<!-- 引入 less -->
<link rel="stylesheet/less" type="text/css" href="./index.less" />
<!-- 引入 less.js 核心库 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
</head>
三、用法总结
1、定义变量
我们可以使用 @ 符号开头定义变量，注意要在结尾处加上分号。
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}编译后代码：
#header {
width: 10px;
height: 20px;
}实际开发中，我们可以根据不同的类型来命名不同的变量，这样不但便于理解，而且易于维护。
/* ============ 距离 ============ */
@space-large: 36px;
@space-middle: 24px;
@space-small: 12px;
// ...
/* ============ 颜色 ============ */
// 颜色可以说是一个项目中定义最多的变量了,可以单独拆分出一个 less 文件进行维护
@color-theme: #0094ff;
@title-color: #090909;
// ...
2、作用域
类似于 JavaScript 中的块级作用域， Less 中同样存在变量的作用域。即有限从最近的作用域下读取变量，换句话说，如果有两个同名变量，那么谁和使用行近谁生效。
// 定义一个同名变量 @color-title
.demo {
@color-title: pink;
.item {
@color-title: skyblue;
.title {
color: @color-title; // skyblue
}
}
}
编译后代码：
.demo .item .title {
color: skyblue;
}3、使用嵌套
在 css 中经常会用到子代选择器，效果可能是这样的：
.container {
width: 1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}上面的代码嵌套了很多层，写起来很繁琐。可如果用 less 的嵌套语法来写这段代码，就比较简洁。
嵌套的举例如下：
.container {
width: @containerWidth;
> .row {
height: 100%;
a {
color: #f40;
&:hover {
color: #f50;
}
}
}
div {
width: 100px;
.hello {
background-color: #00f;
}
}
}将上面的less文件编译为 css 文件后，自动生成的代码如下：
.container {
width: 1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}
.container div {
width: 100px;
}
.container div .hello {
background-color: #00f;
}4、Mixin
Mixin 的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便。
（1）在 less 文件中定义一个类：（将重复的代码放到自定义的类中）
/* 定义一个类 */
.roundedCorners(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}上方代码中，第一行里面，括号里的内容是参数：这个参数是缺省值。
（2）在 less 文件中引用上面这个类：
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}5、import
我们可以在一个 less 文件中引入其他的 less 文件，引入后就可以使用被引入文件的变量和映射。一般在一个 less 文件的最顶部进行引入。
// 可以这样引入
@import url(a.less);
// 或者这样引入
@import 'b.less';
// 当然也可以引入 CSS 文件
@import 'style.css';6. 函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。下面列举一些常用的函数，完整版请移步官网的《Less 函数手册》。
- 逻辑函数
- if 根据表达式返回不同结果
- boolean 存储一个布尔值，用于 if 判断
- 字符串函数
- escape 将URL 编码应用于输入字符串中的特殊字符
- replace 替换字符串中的文本
- 数学函数
- ceil 向上舍入到下一个最高整数
- floor 向下舍入到下一个最小整数
- percentage 将浮点数转换为百分比字符串
- sqrt 计算一个数的平方根。保持单位不变
- abs 计算一个数的绝对值。保持单位不变
- min 返回一个或多个值中的最小值
- max 返回一个或多个值中的最大值
7. 运算
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 10%;
@filler: @base * 2; // 结果是 20%
@other: @base + @filler; // 结果是 30%