less 基础教学_m0_59795537的博客

less 是一门css扩展语言，里面提供的功能更方便我们开发。

less是利用javascript将less文件转换为css文件。

①变量. 在javascript中变量与less中的 ... less基础教学 m0_59795537 于 2022-01-1013:53:46 发布 273 收藏 分类专栏： less 文章标签： less javascript css 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_59795537/article/details/122408308 版权 less 专栏收录该内容 1篇文章 0订阅 订阅专栏 less是一门css扩展语言，里面提供的功能更方便我们开发。

less是利用javascript将less文件转换为css文件。

①变量 在javascript中变量与less中的变量及其类似，不同点在于javascript中使用var等关系词来声明， less中使用@符来作为声明符 例子 @n:15px;//声明一个n变量，属性值15px 基本使用: div{width:@n} 变量可以是属性值、属性名(background等)、路径。

当变量是属性名或则路径时,需要将变量名用花括号包含在里面 例如 @a:background; div{ @{a}:blue }  常用的技巧 在我们的开发过程中，会经常使用路径来获取图片我们可以定义一个路径的变量 例如 @picture:'../src/images';//直接定义在当前图片文件夹 div{background:'@{picture}/图片名.png'}//使用起来就会相当简洁。

变量不需要提前声明也可以使用,但我们在开发过程中，建议将变量放在文件开头，这样方便观看。

②混合mixin   作定义一个类名或则id名。

作用:可以重复使用里面的属性值。

 定义混合 .bor{border:1pxsolidred;} body{   .border();//使用混合 } 结果  body{border:1pxsolidred}; 注意点:使用混合时加上括号; 在这里会不会有小伙伴会发现，如果我们在元素上面直接加上类名不是一样可以使用.bor里面的属性吗？ 从结果上面来看最大的区别属性值在放在body里面的,这样我们只需要在less文件中操作样式属性了 ③嵌套  less从的嵌套比较类似与html中的嵌套  例如:div{button{color:blue}} 翻译成css就是divbutton{color:blue}   结构会更加清晰  如果在嵌套中想要使用伪元素选择器等等。

less提供了一个特殊符&代表父元素,注意只代表父元素  div{&::before{....}} 翻译成css就是div::before{}  在嵌套这一节中只记住注意&是代表父元素。

使用起来就没有太大的问题了。

④运算  1. 算数运算符+、-、*、/可以对任何数字、颜色或变量进行运算  2.算数运算符在加减或比较之前会进行单位换算,计算结果以最左侧操作数的单位为准。

 3.calc()特例不运算最终结果，只计算嵌套函数中的变量和数学公式值  例如   @var:50px/2; div{width:calc(100px-@var)}  结果就是 div{width:calc(100px-25px);//在css执行时会自动计算的} ⑤函数    1.percentage（）将一个小数，转换为百分比。

2.saturate(颜色值,需要提高的百分比)  3.命名空间 将混合只作为变量使用，    .bor(){border:1pxsolidred;}  // 将类名后面加上括号，就不会翻译在css中了，只会在使用的地方进行翻译 body{   .border();//使用混合 } 4.映射   映射与命名空间比较类似，也可以说与混合比较类似     #bor(){  pr:'bule'; //使用自定义的名字pr   } 使用  div{color:#bor[pr]}  //使用时使用方括号 5.作用域   less中的作用域与css作用域类似  首先从自己的作用域查找，如果没有则会向上一层查找。

  ⑥导入     导入的工作方式和你预期的一样，可以导入.less文件,此文件中的所有变量就可以全部使用了。

   如果导入的文件是 .less 扩展名，则可以将扩展名省略掉;     @import"library";//library.less @import"typo.css";          m0_59795537 关注 关注 0 点赞 踩 0 评论 0 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 less基本语法笔记 qq_42357338的博客 08-25 180 1、less中的注释： 以//开头的注释，不会被编译到css文件中 以/**/包裹的注释会被编译到css文件中 2、less中的变量： a、使用@来声明一个变量：例@red:red b、作为普通属性值来使用：直接使用@red c、作为选择器和属性名使用：#@{selector}的形式 d、作为url：@{url} e、变量是延迟加载的 3、less中的嵌套规则： a、基本嵌套规则 b、&的使用 4、less中的混合： 混合就是将一系列属性从一个规则集引入到另一个规则集的方式 a、普通混合（编译到原 Less入门视频教程 09-07 本课程以通俗易懂的方式讲解Less技术，课程内容包括： 1.Less简介、基本用法 2.变量、混合Mixin、导引表达式 3.运算、函数 4.嵌套 5.继承 6.导入import 通过多个案例逐一讲解Less的用法，通俗易懂，最适合初学者的教程！ 参与评论 您还未登录，请先 登录 后发表或查看评论 Vue3之路--Less教学 weixin_51029697的博客 03-30 373 概览 Less（LeanerStyleSheets的缩写）是一门向后兼容的CSS扩展语言。

这里呈现的是Less的官方文档（中文版），包含了Less语言以及利用JavaScript开发的用于将Less样式转换成CSS样式的Less.js工具。

因为Less和CSS非常像，因此很容易学习。

而且Less仅对CSS语言增加了少许方便的扩展，这就是Less如此易学的原因之一。

变量（Variables） 无需多说，看代码一目了然： @width less基础——优化必备～ sobject的博客 03-25 40 文章目录前言less可以说是动态化的css语言，主要是因为他的代码可以复用一、less是什么？二、使用步骤1.less的安装2.less使用3.less的功能01定义变量02混合03嵌套04计算05转义06命名空间映射 前言 less可以说是动态化的css语言，主要是因为他的代码可以复用 提示：以下是本篇文章正文内容，下面案例可供参考 一、less是什么？ less作为一门CSS扩展语言，也就是说CSS预处理器。

（LeanerStyle Sheets）简称less，它只不过是为css新增这些的 Less学习详解 weixin_44741485的博客 02-05 147 Less是一种动态的样式语言。

Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，他也能正常工作。

如： Less现在可以在客户端（如：IE+, Less使用教程（容易入门） Mount华的博客 03-23 4430 Less语法详解 1.注释 //单行注释 /* 多行注释 多行注释 多行注释 */ 2.变量 @color:red; @size:14px; .container{ background:@color; font-size:@size; } 编译后的css代码 .container{ background:red; font-size:14px; } 3.混合 第一种... LESS 01-08 387 什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

语言特性快速预览： 变量： 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。

所以在做全局样式调整的 less语法小结-源代码+注释.rar 04-07 此工程是在b站学习了尚硅谷less教学视频后的语法小结。

在此作为一种分享与个人的记录。

关键字：less变量的常见用途，less的混合，less的继承，避免编译less，使用less进行加减乘除。

Less10分钟入门 花神的博客 04-30 1837 在学习less时发现网上虽然关于less的教程非常多，但是质量参差不齐看的人眼花缭乱，半天也不知所云，搞得整个人都不好，浪费时间不说，还打击了我们探索新知识的信心，对于这种不负责任乱写教程误人子弟的人，本人表示深深的鄙视，现在我就介绍一种最简单高效学习less的方法，10分钟即可掌握less核心用法，妈妈再也不用担心我学不会less啦。

1、下载安装koala。

此神器可以自动将less文件编译的cs Less实战（一）：快速入门 数据库爆破专家的博客 05-05 1240 文章目录安装less命令行用法方法一：直接进行编译，显示结果方法二：编译输出为指定的文件方法一实操演示方法二实操演示 Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。

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

因为Less和CSS非常像，因此很容易学习。

而且Less仅对CSS语言增加了少许方... Less几种使用方式 Super_LD的博客 05-30 1万+ 在Vue中使用Less1、安装依赖处理普通的.css文件，       需要安装css-loader,style-loader     　　　　　.less文件，需要安装less-loader   //.sass文件，需安装  sass-loadernpminstall css-loaderstyle-loader --save-devnpminstall less-load... Less入门视频教程-汤小洋-专题视频课程 IT教育-汤小洋 09-07 400 本课程以通俗易懂的方式讲解Less技术，课程内容包括： 1.Less简介、基本用法 2.变量、混合Mixin、导引表达式 3.运算、函数 4.嵌套 5.继承 6.导入import 通过多个案例逐一讲解Less的用法，通俗易懂，最适合初学者的教程！... Less入门教程 mbh的博客 12-19 486 变量 //声明变量 @border-width:1px; @red:#842210; //使用变量 div#header{ border:@border-widthsolid@red; } css编译后： div#header{ border:1pxsolid#842210; } 混合 //Mixins允许您重复使用内容 //另一个规则集中的某个规则... less入门教程 刚刚好 09-14 3432 less教程 LESS使用教程 慕白博客 07-19 2724 LESS使用教程 第一章LESS简介 第一节变量 第二节混合 第三节嵌套规则 第四节函数运算 第二章使用 第一节客户端使用 第二节服务端使用 第三章语法 第一节变量 第二节混合用法 第三节带参数混合 第四节嵌套规则 第五节运算 第六节作用域 第七节注释 第八节避免编译 第一章LESS简介 less是一种动态样式语言；为提高css应用的... 三十分钟学会Less weixin_33851429的博客 10-22 75 2019独角兽企业重金招聘Python工程师标准>>> ... 前端基础入门之cssless LoveSummer 06-20 101 是一门的预处理语言在中搜索，点击html代码使用快捷方式创建代码生成代码 less代码创建文件，编写代码 插件会帮助我们在所在目录下面生成一个相同名称的文件查看生成的代码 我们直接在HTML中引入生成的 运行代码，查看效果中的单行注释，注释中的内容不会被解析到中中的注释，内容会被解析到文件中 父子关系嵌套 在中，父子关系可以直接嵌套 对应的 变量 变量，在变量中可以存储一个任意的值并且我们可以在需要时，任意的修改变量中的值变量的语法： 生成的代码 注意：在中使用语法需要用引号包裹 生成的代码 拼 基于Java+SpringBoot+vue+element实现餐厅点餐系统平台 热门推荐 java李阳勇的博客 06-22 1万+ 主要功能包括管理员：首页、个人中心、用户管理、菜品分类管理、菜品信息管理、菜品评价管理、系统管理、订单管理，用户；首页、个人中心、菜品评价管理、我的收藏管理、订单管理，前台首页；首页、菜品信息、菜品资讯、个人中心、后台管理、购物车、在线客服等功能。

...... JavaScript数据类型 最新发布 屿屿屿屿屿的博客 06-27 259 数据类型可以是：数值，文本，图形，音频，视频 1、小数和整数 JavaScript不区分小数和整数，Number 2、浮点数 尽量避免使用浮点数进行运算，存在精度问题！ null和undefined‘abc’、“abc”true，false 6、比较运算符 这是一个JS的缺陷，坚持不要使用==比较 须知：Java的数组必须是相同类型的对象，JS中不需要这样 取数字下标：如果越界了，就会报undefined 8、对象 对象是大括号，数组是中括号... “相关推荐”对你有帮助么？ 非常没帮助 没帮助 一般 有帮助 非常有帮助 提交 ©️2022CSDN 皮肤主题：游动-白 设计师：我叫白小胖 返回首页 m0_59795537 CSDN认证博客专家 CSDN认证企业博客 码龄1年 暂无认证 21 原创 108万+ 周排名 9万+ 总排名 1万+ 访问 等级 220 积分 0 粉丝 2 获赞 2 评论 3 收藏 私信 关注 热门文章 http协议 2282 HTTP协议 1631 webpack五个核心配置项 1192 webpack基础概念 947 vue使用stylelint 916 分类专栏 vue 3篇 stylelint 1篇 HTTP协议 1篇 axios 1篇 less 1篇 vuex 1篇 webpack 3篇 最新评论 HTTP协议 m0_59795537: 有疑问,可以在评论区提出。

vue使用stylelint m0_59795537: stylelint-config-idiomatic-order这个包定义了常用的属性顺序。

下载后之后在配置项的extends中添加即可。

您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 class类 什么是原型？ sass处理器 2022年14篇 2021年7篇 目录 目录 分类专栏 vue 3篇 stylelint 1篇 HTTP协议 1篇 axios 1篇 less 1篇 vuex 1篇 webpack 3篇 目录 打赏作者 m0_59795537 你的鼓励将是我创作的最大动力 ¥2 ¥4 ¥6 ¥10 ¥20 输入1-500的整数 余额支付 (余额：--) 扫码支付 扫码支付：¥2 获取中 扫码支付 您的余额不足，请更换扫码支付或充值 打赏作者 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值