如何在html中使用less，亲测可用

前在网页切图的时候，会觉得css如果能有变量逻辑这些会很方便，它来了，less.js插件可以使得css有类似变量的语法，它不是很新的技术，习惯用它的人会觉得很好用，而且它可以直接像jquery一样直接在网页上引用，也可以体验，不过仅仅适合体验，这种直接引用的方式不适合正式情况下用，因为页面js会有一个执行的时间，所以看起来会不流畅，可以在环境下开发，然后编译出来。

在HTML中，可以使用Less作为CSS预处理器来提高代码的可维护性和可复用性。以下是在HTML中使用Less的步骤：

1. 引入Less文件

在HTML文件中，使用<link>标签引入Less文件，如下所示：


<link rel="stylesheet/less" type="text/css" href="styles.less">

2. 引入Less.js

在页面的底部引入Less.js文件，如下所示：


<script src="less.min.js"></script>

3. 编写Less代码

在styles.less中编写Less代码，例如：


@font-size: 16px;
h1 {
  font-size: @font-size;
  color: red;
}

注意，在Less中使用变量需要使用@符号来声明。

4. 编译Less代码

当网页加载时，Less.js会将styles.less文件编译为CSS，并将其替换为<link>标签的href属性中的CSS文件。

通过在本地安装Less和使用命令行工具来编译Less文件，可以避免在生产环境中依赖Less.js。

什么要学习LESS?

就是为了少写代码啊！
LESS是CSS的预处理语言，在CSS语言的基础上，进行了语法扩展。
增加了变量、继承、函数等功能，让CSS代码书写更简洁，提高代码复用性、逻辑性，在管理大型项目时更容易修改和维护。
同时，相对于其它预处理语言，LESS也更容易学习和使用。

如何在我的项目中使用LESS?

LESS是CSS的预处理语言，使用它的目的是最终产出CSS代码，所以LESS并不能被HTML直接调用，需要先进行编译后，生成最终CSS文件，在放到HTML中使用。
这个过程是不是很麻烦？在没有使用LESS前，很多人会这样想。
但其实并不麻烦，现在你可能通过VS Code + Easy LESS插件来使用快速开发调试。

开发工具配置

1.在VS Code扩展中查找Easy LESS，并安装，安装后重启动VS Code。
2.重启后，在次进入扩展，点击Easy LESS右下的齿轮，进行扩展设置，点击在Settings.json中编辑，在json中输入如下内容。

{
    "typescript.locale": "zh-CN",
    "less.compile": {
        "compress": false,//是否进行压缩
        "sourceMap": true,//是否生成map文件
        "out": true, // 是否输出css文件
        "outExt": ".css", // 输出文件后缀,小程序开发'wxss'
    }
}

第一次使用LESS

1.在VS Code中新建一个文件夹，创建一个文件index.html，输入如下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <div class="layout">
        <div class="header"></div>
    </div>
</body>
</html>

2.在创建一个文件Style.less，输入如下内容：

@x:100px;//变量
@y:@x+100px;//运算
@color:rgb(228, 161, 17);
.layout{
    width: @x * 2;
    height: @y * 2;
    background-color: @color;
    .header{
        width: 100px;
        height: @y;
        background-color: @color+#999;
    }
}

3.当你保存Style.less文件时，会自己创建出Style.css和Style.css.map两个文件，Style.css就是最终通过LESS语法创建的CSS文件，Style.css.map是你在通过浏览器调试时，告诉浏览器CSS对应Less文件的代码位置，方便调试使用。

LESS基础知识

变量（Variables）

使用@+名称定义和使用变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：

#header {
  width: 10px;
  height: 20px;
}

混合（Mixins）

将一组属性混入到另一个规则集的方法。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

嵌套（Nesting）套娃模式

Less 模仿了 HTML 的组织结构进行书写。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

运算（Operations）

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

注释（Comments）

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

导入（Importing）

ESS 是一种基于 CSS 的预编译器，旨在提高 CSS 代码的可重用性、可维护性和可读性。它是一种强大的工具，可简化 CSS 开发过程。

LESS 的优势

* 可重用性：LESS 提供了变量、混合物和函数等功能，以提高 CSS 代码的可重用性。

* 可维护性：嵌套选择器和命名类名等功能可以简化代码结构，提高可维护性。

* 可读性：LESS 的语法类似于 CSS，但更易于阅读和理解。

* 增强功能：LESS 提供了许多增强功能，例如自动前缀和变量。

LESS 的核心概念

1. 变量

* 允许在 CSS 代码中定义可重用的值。

* 可以使用变量来存储颜色、尺寸和任何其他值。

2. 混合物

* 允许组合多个选择器以创建新的选择器。

* 可以使用混合物来简化和组织 CSS 代码。

3. 嵌套选择器

* 允许将选择器嵌套在彼此内。

* 可以使用嵌套选择器来组织代码并提高可读性。

工具和集成

* Less 编译器：用于将 LESS 代码转换为 CSS。

* 各种集成：有许多工具可用于将 LESS 与其他工具集成。例如，LESS 可以与 gulp 或 grunt 集成。

使用 LESS 的优点

* 提高 CSS 代码的可重用性。

* 提高 CSS 代码的可维护性。

* 提高 CSS 代码的可读性。

* 增强 CSS 功能。

结论

LESS 是一种强大的 CSS 预编译器，可以提高 CSS 代码的可重用性、可维护性和可读性。它是现代 web 开发中使用最广泛的预编译器之一。

在线咨询

上一篇：HTML 字符实体
下一篇：HTML如何设置div背景图片的的透明度

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商