本文介绍了CSS维护的困难，特别是冗余性和非程序性，然后详细阐述了Less作为CSS预处理器的优势，如变量、Mixin和运算功能。文章还指导了Less的安装、使用方法，包括变量声明、嵌套和运算示例，以及如何通过VSCode插件实现Less到CSS的编译。
1. Less 基础
1.1 维护 css 的弊端
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
-
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
-
不方便维护及扩展，不利于复用。
-
CSS 没有很好的计算能力
-
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
1.2 Less 介绍
-
Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。
-
做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。
-
它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。
-
Less中文网址： Less.js 中文网
-
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。
1.3 Less 安装（注意如果使用vscode无需安装less）
-
安装nodejs，可选择版本(8.0)，网址：下载 | Node.js 中文网
-
检查是否安装成功，使用cmd命令（win10 是 window +r 打开 运行输入cmd） —- 输入“ node –v ”查看版本即可
-
基于nodejs在线安装Less，使用cmd命令“ npm install -g less ”即可
-
检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可
1.4 Less 使用
我们首先新建一个后缀名为less的文件， 在这个less文件里面书写less语句。
-
Less 变量
-
Less 编译
-
Less 嵌套
-
Less 运算
1.5 Less 变量
-
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
1.变量命名规范：
-
必须有@为前缀
-
不能包含特殊字符
-
不能以数字开头
-
大小写敏感
@color: pink;
2.变量使用规范：
//直接使用
body{
color:@color;
}
a:hover{
color:@color;
}
1.6 Less 编译
-
本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
-
所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。
vocode Less 插件
-
Easy LESS 插件用来把less文件编译为css文件
-
安装完毕插件，重新加载下 vscode。
-
只要保存一下Less文件，会自动生成CSS文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="my.css"> </head> <body> <div> 我的颜色也是粉色 </div> </body> </html>
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}
1.7 Less 嵌套
我们经常用到选择器的嵌套
#header .logo {
width: 300px;
}
Less 嵌套写法
#header {
.logo {
width: 300px;
}
}
如果遇见 （交集|伪类|伪元素选择器）：
-
内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
-
如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
a:hover{
color:red;
}
Less 嵌套写法
a{
&:hover{
color:red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* .header {}
.header a {} */
</style>
<link rel="stylesheet" href="nest.css">
</head>
<body>
<div class="header">
<a href="#">文字</a>
</div>
<div class="nav">
<div class="logo">传智播客</div>
</div>
</body>
</html>
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1. less 嵌套 子元素的样式直接写到父元素里面就好了
a {
color: red;
// 2. 如果有伪类，交集选择器，伪元素选择器 我们内层选择器的前面需要加&
&:hover {
color: blue;
}
}
}
.nav {
.logo {
color: green;
}
&::before {
content: "";
}
}
1.8 Less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
注意：
乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开 1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="count.css"> </head> <body> <div></div> </body> </html>
@baseFont: 50px;
html {
font-size: @baseFont;
}
@border: 5px + 5;
div {
width: 200px - 50;
height: (200px + 50px) * 2;
border: @border solid red;
background-color: #666 - #222;
}
img {
// 现在的less语法中，除法需要加()或.
// 但不推荐.的写法，会提示波浪线错误，更推荐小括号()
width: (82rem / @baseFont);
height: 82rem ./ @baseFont;
}
// 1.我们运算符的左右两侧必须敲一个空格隔开
// 2.两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
// 3.两个数参与运算 如果2个数都有单位，而且不一样的单位 最后的单位以第一个单位为准
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
