浏览器端使用less

拼搏现实的明天。 2021-10-19 03:56 414阅读 0赞

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

# **浏览器端用法:** #

Next, [download less.js][] and include it in a `<script></script>` tag in the `<head>` element of your page:

<script src="less.js" type="text/javascript"></script>

***怎么下载及找到less.js文件？***

*你可以点击文章中的download less.js进行下载（你可以在less官网找到浏览器端的用法讲解区域，你可以看到download less.js 点击下载），下载成功后你会有个名为：less.js-master包，解压找到less.min.js，沿着目录结构往下找less.js-master\\dist，less.js就在dist文件夹里面。*

*使用考拉（*[http://koala-app.com/][http_koala-app.com]*）将less文件*编译为css文件。注意将less文件放在css文件夹下面，然后将整个css文件夹拖入考拉中，注意不要出现中文，不然编译不出.css文件。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
    <div class="less-test1">
        <span class="less-test2">
             XYZ
        </span>
    </div>
    </body>
    <script src="../less.min.js" type="text/javascript"></script>
    </html>

//style.less文件
    .less-test1 {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .less-test2 {
        font-weight: bold;
        font-size: 20px;
      }
    }

.less是预编译文件，浏览器最终读的还是.css文件。

[download less.js]: https://github.com/less/less.js/archive/master.zip
[http_koala-app.com]: http://koala-app.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器中使用Less

我们都知道less无法在浏览器中直接使用，浏览器不能直接对其识别那我就是想在浏览器中使用less呢？应该怎么做？解决 > 通过less解析插件less.js（Ja

叁歲伎倆/ 2024年03月30日 14:33/ 0 赞/ 46 阅读

相关 Less 的使用

vscode 插件 EasyLESS EasyLESS // 插件把原来的less文件编译为css文件 Lass 变量 @变量名: 值; //不

小鱼儿/ 2023年01月10日 13:29/ 0 赞/ 162 阅读

相关 less基本使用

less是一个扩展的css语言；可定义变量； <!DOCTYPE html> <html> <head> <meta charset="ut

约定不等于承诺〃/ 2022年10月05日 00:45/ 0 赞/ 172 阅读

相关 less笔记-Less安装与基础使用

一、安装Less npm为Node.js的包管理器，通过npm可简易的安装Less。 Node.js下载地址：https://nodejs.org/en/ 下载的Node

布满荆棘的人生/ 2022年09月25日 13:21/ 0 赞/ 267 阅读

相关 less使用

less的特点：大体上语法同css，但是支持变量，嵌套等特殊用法，使用起来也更方便。 less不能直接运行在浏览器上，得通过转换为css代码，采用用于浏览器

曾经终败给现在/ 2022年09月04日 11:42/ 0 赞/ 186 阅读

相关 LESS使用教程

LESS使用教程第一章 LESS简介第一节变量第二节混合第三节嵌套规则

灰太狼/ 2022年05月19日 02:46/ 0 赞/ 286 阅读

相关浏览器端使用less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。

拼搏现实的明天。/ 2021年10月19日 03:56/ 0 赞/ 415 阅读

相关浏览器端使用less

文章目录官网地址下载使用官网地址 [http://lesscss.cn/][http_les

素颜马尾好姑娘i/ 2021年09月23日 09:08/ 0 赞/ 323 阅读

相关 vue 使用less

vue中使用less 1、在创建项目时使用less编译或者 1、安装 cnpm install -D less cn

妖狐艹你老母/ 2021年07月24日 15:14/ 0 赞/ 474 阅读

相关后端编译less文件

Less 是一个非常优秀的css增强方言。如果你熟悉Bootstrap，你会发现这个项目大量使用Less, 并且可以通过修改less文件，以此定制自己的boostrap。那

朱雀/ 2021年05月12日 11:51/ 0 赞/ 530 阅读