less

最新推荐文章于 2024-04-26 23:39:14 发布
最新推荐文章于 2024-04-26 23:39:14 发布
阅读量96 收藏
点赞数
分类专栏： CSS 笔记 文章标签： less css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ef_ef/article/details/109823433
版权

less的6种用法

  1. js运行时编译:

    1. 网上下载less.min.js
    2.  <!DOCTYPE html>
 <html lang="en">
 <head>
 	<!-- 一定要写type="text/less" -->
     <style type="text/less">
         .content-box{
             width: 500px;
             height: 500px;
             background: blue;
             .inner{
                 width: 100px;
                 height: 100px;
                 background: red;
             }
         }
     </style>
 </head>
 <body>
     <div class="content-box">
         <div class="inner"></div>
     </div>
     <script src="./less-2.5.3.min.js"></script>
 </body>
 </html>

  2. vacode内自动编译:

    1. 安装easy less插件
    2. 建一个文件夹.vscode
      .vscode 文件夹下建一个叫 settings.json 的文件
      settings.json 中配置内容如下：
       "less.compile": {
	 "outExt": ".wxss"
 }
    3. outExt 参数为导出文件名，默认为 .css，可以配置 .wxss、.acss 等，其他配置项请查询官方；

  3. 用koa-la工具编译:

    1. 下载koa-la软件
    2. 在这里插入图片描述
    3. koala有两种编译模式: normal即正常, compress即编译成–压缩成一行的css代码

  4. Node.js中编译

  5. vue-cli3中编译
    直接 npm i less less-loader -D 就能直接写less了

less的语法

// 开头的不会被编译, 只有 /* */ 的才会被编译

1. less变量的使用

变量的声明: @变量名: xxx; 不仅可以声明属性值, 还能声明属性名, 选择器名
变量可以在任何位置声明, 但是less变量具有作用域
变量的获取:
1. 属性值: @xxx
2. url: @{xxx}
3. 属性名: @{xxx} 不常用
4. 选择器名: @{xxx} 不常用
变量的延迟加载:

	div{
		@var: 1;
		number: @var; // 结果是2, 因为less的变量会延迟加载, 即先解析完作用域中变量的声明, 在去获取值
		@var: 2;
	}
2. &符号
// less
	div{
		&:hover{
		}
	}

编译后, 结果如下:

// css
	div:hover{
	}
3. 混合maxin(代码块)
3.1 普通混合
// less
	.youCode{
		width: 100px;
		height: 100px;
		color: red;
	}
	div{
		.youCode;
	}
	p{
		.youCode;
	}

编译后, 结果如下:

// css
	.youCode{
		width: 100px;
		height: 100px;
		color: red;
	}
	div{
		width: 100px;
		height: 100px;
		color: red;
	}
	p{
		width: 100px;
		height: 100px;
		color: red;
	}
3.2 带参数的混合
// less
	// 不带参数即.youCode() { }
	.youCode(@param1:100px,@param2){ // @param1:100px即设置默认值
		width: @param1;
		height: @param1;
		color: @param2;
	}
	div{
		.youCode(@param2: red); // 指定@param2为red
	}
	p{
		.youCode(200px,blue);
	}

编译后, 结果如下:

// css
	div{
		width: 100px;
		height: 100px;
		color: red;
	}
	p{
		width: 200px;
		height: 200px;
		color: blue;
	}
4. @import
// less
	@import "xxx.less";
5. 匹配模式
// triangle.less
	.triangle(@_,@with,@color)) {
		width: 0px;
		height: 0px;
	}
	.triangle(Left,@with,@color) {
		border-width: @width;
		border-style: solid;
		border-color: transparent transparent transparent @color;
	}
	.triangle(Right,@with,@color) {
		border-width: @width;
		border-style: solid;
		border-color: transparent @color transparent transparent;
	}
	.triangle(Top,@with,@color) {
		border-width: @width;
		border-style: solid;
		border-color:  @color transparent transparent transparent;
	}
	.triangle(Bottom,@with,@color) {
		border-width: @width;
		border-style: solid;
		border-color: transparent transparent @color transparent;
	}

// index.less
	@import "./triangle.less";
	.myTriangle{
		.triangle(Right,100px,red);
	}
6. 变量的计算
// less
	div{
		width: 100 + 100px; // 一方带单位即可
	}

less还可以计算不同单位的值

7. extend
// less1
	.juln{
		color: black;
	}
	div:extend(.juln) {
		background: white;
	}

或

// less2, 极力推荐这种写法
	.juln{
		color: black;
	}
	div {
		background: white;
		&:extend(.juln);
	}

编译后, 结果如下:

// css
	.juln,div{
		color: black;
	}
	div{
		background: white;
	}

extend和maxin的区别:

  • maxin会让css文件变得很大, 因为maxin类似于ctrl+c ctrl+v, 但优点是支持参数
  • extend会让css文件中代码复用, 所以极力推荐extend的写法, 但缺点是不支持参数
// less
	.juln{
		color: black;
		&:hover{
			color: red;
		}
		.test{
			color: blue;
		}
	}
	div {
		background: white;
		&:extend(.juln all); // 加个all即继承所有和.juln有关的样式, 如.juln:hover的样式
	}

编译后, 结果如下:

// css
	.juln,div{
		color: black;
	}
	.juln:hover,div:hover{
		background: white;
	}
	.juln .test,div .test{
		color: blue;
	}
8. 避免编译
// less
	div{
		width: calc(100px + 100px);
	}

会被编译成:

// css
	div{
		width: calc(200px);
	}

但如果不想让less中的100px+100px被编译, 就得像下面这么写:

// less
	div{
		width: ~"calc(100px + 100px)"; // 重点是 ~" "
	}

即可编译成:

	div{
		width: calc(100px + 100px);
	}
Z-Juln
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
less.min.js
01-06
less
LessCSS
07-22
资源名称：Less CSS内容简介：像写程序一样写 CSSLess CSS 是一个 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6 , Webkit, Firefox)，也可以在服务端运行使用 Less CSS 的好处写更少的 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Less
01-07
Less基础 css存在的弊端 css是一门非程序式与语言，没有变量、函数、scope（作用域）等概念 css需要书写大量看似没有逻辑的代码，css冗余度是比较高的 不方便维护和扩展，不利于复用 css没有很好的计算能力 非前端开发工程师，往往因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目 Less介绍 Less是一门css预处理语言，它扩展了css的动态特性。在css的基础上引入了变量、运算、函数等功能。 常见的预处理器：Sass、Less、Stylus Less安装 首先需要安装node.js 使用npm install -g less安装less 使用less -v
koala less
07-18
自动将less 文件转换为css文件
less开发指南
09-25
LESS（是.less后缀名的文件） 包含一套自定义的语法及一个解析器，我们根据这些语法定义自己的样式规则,为 CSS 加入程序式语言的特性，如变量、继承、运算、嵌套等，更方便CSS的编写和维护
浏览器端使用less
帆酱的博客
03-02 379
官网地址 http://lesscss.cn/ 1、通过在官网或者GitHub下载less.min.js文件，也可通过官网的cdn引入 2、编辑一个less文件test.less（注意，只能用link方式引入，style标签不支持） .ccc{ color: red; } 3、编辑html页面 <!DOCTYPE html> <html> ...
less小册
web_zzw宁爸爸的博客
10-01 238
less 01 引入less 在页面中 引入 Less.js 可在官网下载或使用CDN <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> 需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为styles...
less_scss_lesssass_
09-30
less&sass代码示例，里面包含了less的基本语法教程，sass的基本教程
less-2.5.3.min.js
05-16
css的预编译语言，便于处理开发css，可供下载使用，用于使浏览器支持less.css。Less预编译脚本
less.min.js.zip
07-24
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，Less 是基于 JavaScript 的，使用 Less 编写样式最简单的方式可以在 页面中引入 less.min.js 即可
jquery.jqGrid.min.js
11-22
支持三行表头，修改了官方的jquery.jqGrid.min.js，直接替换即可
less.js-2.7.3.jar
11-20
less文件最新jar包，引入less文件的必须jar，先引入less文件再引入jar包使用。
less.js-1.7.3
08-06
Less.js 源码。找了很久才找到的！分享给大家
less.js-windows 下载
12-06
A standalone version of the LESS command-line compiler that will run on Windows with no other dependencies.
【Linux】：文件查看 stat、cat、more、less、head、tail、uniq、wc
最新发布
屿小夏.的知识博客
04-26 1242
在Linux系统中，文件是信息的核心。深入了解和操作文件内容是每个系统管理员和开发者必备的技能。本文将为您揭开Linux文件魔法的面纱，介绍一系列强大的命令，包括stat、cat、more、less、head、tail、uniq和wc。通过这些神奇的命令，您将能够轻松驾驭文件的属性、内容以及统计信息。通过本文的介绍，您不仅学会了如何查看文件的详细属性，还掌握了一系列处理文件内容的手段。这些命令不仅提高了您对文件的认知，也让您在处理文件时更加得心应手。
CSS引入的三种方式
weixin_59272777的博客
04-24 741
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
less hover
09-14
The "less hover" refers to using the CSS pseudo-class ":hover" with the LESS preprocessor. In LESS, you can write dynamic and reusable CSS styles using variables, mixins, and other features. When it ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值