less基本使用

约定不等于承诺〃 2022-10-05 00:45 172阅读 0赞

less是一个扩展的css语言；可定义变量；

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>less demo </title> 	
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>	
    </head>
    <body>
    
    <p>这是一些文本。</p>
    
    <div id="div1">
      <h3>这是一个在 div 元素中的标题。</h3>
      <p>这是一个在 div 元素中的文本。</p>
    </div>
    
    <p>这是一些文本。</p>
    
    </body>
    </html>

引入less.js；less语言相关的内容写在.less文件中，然后在html中引入；顺序，引入less文件在前；

styles.less;

@width: 400px;
    @height: @width + 10px;
    @a1: 2px;
    @b1: #303030;
    
    
    #div1 {
      width: @width;
      height: @height;
      border:@a1;
      background-color: @b1;
    }

运行一下；在浏览器中出现下图错误；

![20210607042821853.PNG][]

由于浏览器的同源策略限制不能获取less文件内容，下回再搞；

也可以用npm命令安装less，然后把less文件解析为css文件；

![20210607043222343.PNG][]

解析得到如下内容；

\#div1 \{  
  width: 400px;  
  height: 410px;  
  border: 2px;  
  background-color: \#303030;  
\}

[20210607042821853.PNG]: /images/20221005/73061cc49caf4a8d87e59427dd0777fc.png
[20210607043222343.PNG]: /images/20221005/70e8bf53c08b4ddcb9d0f819c2c1740e.png

发表评论取消回复

表情：

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

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

相关阅读

相关从入门到精通Less，详解基本使用技巧！

Less（Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。，它扩展了CSS（层叠样式表）的功能并提供了更灵活、更强大的样式定义和管理机制。

￡神魔★判官ぃ/ 2024年03月16日 21:09/ 0 赞/ 77 阅读

相关 Less 的使用

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

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

相关 less的基本用法

less > less可以说是动态化的css语言，主要是因为他的代码可以复用 less的使用: 1. 在全局npm 安装less ，并执行`lessc less文件

朴灿烈づ我的快乐病毒、/ 2023年01月04日 15:55/ 0 赞/ 127 阅读

相关 less基本使用

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

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

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

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

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

相关 less使用

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

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

相关 LESS使用教程

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

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

相关 Linux常用基本命令(less)

LESS：跟more命令的功能类似，都是用于分页显示内容，但是他的性能比more更高，功能比more更丰富，他读取文件是按需加载格式： less \[option\] \

本是古典何须时尚/ 2022年03月28日 15:12/ 0 赞/ 189 阅读

相关 less的基本用法

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算，函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)

蔚落/ 2021年12月03日 03:41/ 0 赞/ 430 阅读

相关 vue 使用less

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

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