Less 示例

2025 年 3 月 17 日 | 阅读 1 分钟

让我们用一个基本示例来理解 Less 的工作原理。

创建一个名为 "simple.html" 的 HTML 文件，其中包含以下数据。

HTML 文件：simple.html

<!DOCTYPE html>
<head>	
 <link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
 <h2>A simple example of Less</h2>
 <h3>Hello JavaTpoint</h3>
</body>
</html>

现在创建一个名为 "simple.less" 的文件。它类似于 CSS 文件。唯一的区别是它以 ".less" 扩展名保存。

Less 文件：simple.less

@primarycolor: #FF7F50;
@color:#800080;
h2{
color: @primarycolor;
}
h3{
color: @color;
}

将 "simple.html" 和 "simple.less" 两个文件放在 Node.js 的根文件夹中

现在，执行以下代码：lessc simple.less simple.css

这将编译 "simple.less" 文件。将生成一个名为 "simple.css" 的 CSS 文件。

例如

生成的 CSS "simple.css" 具有以下代码

h2 {
  color: #FF7F50;
}
h3 {
  color: #800080;
}

输出

下一主题Less 注释

Less 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Less 教程

Less 函数

Less 面试

Less 示例

相关帖子

Less 父选择器

Less 注释

Less 语法

2) Mixins 作为函数

Less 导入

3) 将规则集传递给 mixin

Less 变量

什么是 Less

Less 合并

2) Less 合并空格

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器