less 基础教学_m0_59795537的博客

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

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

①变量. 在javascript中 ... less基础教学 m0_59795537 于 2022-01-1013:53:46 发布 269 收藏 分类专栏： 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语法小结-源代码+注释.rar 04-07 此工程是在b站学习了尚硅谷less教学视频后的语法小结。

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

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

参与评论 您还未登录，请先 登录 后发表或查看评论 less基础——优化必备～ sobject的博客 03-25 27 文章目录前言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使用教程 慕白博客 07-19 2716 LESS使用教程 第一章LESS简介 第一节变量 第二节混合 第三节嵌套规则 第四节函数运算 第二章使用 第一节客户端使用 第二节服务端使用 第三章语法 第一节变量 第二节混合用法 第三节带参数混合 第四节嵌套规则 第五节运算 第六节作用域 第七节注释 第八节避免编译 第一章LESS简介 less是一种动态样式语言；为提高css应用的... LESS 01-08 387 什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

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

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

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

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

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

而且Less仅对CSS语言增加了少许方... Less入门视频教程 09-07 本课程以通俗易懂的方式讲解Less技术，课程内容包括： 1.Less简介、基本用法 2.变量、混合Mixin、导引表达式 3.运算、函数 4.嵌套 5.继承 6.导入import 通过多个案例逐一讲解Less的用法，通俗易懂，最适合初学者的教程！ Less使用教程（容易入门） Mount华的博客 03-23 4398 Less语法详解 1.注释 //单行注释 /* 多行注释 多行注释 多行注释 */ 2.变量 @color:red; @size:14px; .container{ background:@color; font-size:@size; } 编译后的css代码 .container{ background:red; font-size:14px; } 3.混合 第一种... Less10分钟入门 花神的博客 04-30 1831 在学习less时发现网上虽然关于less的教程非常多，但是质量参差不齐看的人眼花缭乱，半天也不知所云，搞得整个人都不好，浪费时间不说，还打击了我们探索新知识的信心，对于这种不负责任乱写教程误人子弟的人，本人表示深深的鄙视，现在我就介绍一种最简单高效学习less的方法，10分钟即可掌握less核心用法，妈妈再也不用担心我学不会less啦。

1、下载安装koala。

此神器可以自动将less文件编译的cs less入门教程 刚刚好 09-14 3420 less教程 Less学习教程一 xiaolin9902的专栏 10-16 79 最近在认真学习CSS，于是顺便学了一下LESS。

想在网上找点中文资料，却发现很少，有几个中文网站，连文档都没翻译完全。

还是自己动动手，写点东西放在这里作为备忘。

less的官网是http://www.lesscss.org,目前的版本是3.9.0 官网首页给出了两种使用方式：1.npminstall-gless，然后命令行下使用lessc进行编译，例如lesscstyles.les... Less入门视频教程-汤小洋-专题视频课程 IT教育-汤小洋 09-07 398 本课程以通俗易懂的方式讲解Less技术，课程内容包括： 1.Less简介、基本用法 2.变量、混合Mixin、导引表达式 3.运算、函数 4.嵌套 5.继承 6.导入import 通过多个案例逐一讲解Less的用法，通俗易懂，最适合初学者的教程！... Less入门教程 mbh的博客 12-19 483 变量 //声明变量 @border-width:1px; @red:#842210; //使用变量 div#header{ border:@border-widthsolid@red; } css编译后： div#header{ border:1pxsolid#842210; } 混合 //Mixins允许您重复使用内容 //另一个规则集中的某个规则... 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 weixin_33851429的博客 10-22 75 2019独角兽企业重金招聘Python工程师标准>>> ... 【Linux】查看文本文件（cat|less|more|head|tail） 最新发布 XavierJ的博客 06-07 14 本文将介绍如何在Linux中查看文本文件内容。

由于Linux中配置文件、日志文件通常都采用纯文本格式存储，因此采用适当的方法来高效地查看文本文件内容，对于Linux系统管理员来说是一项必备的技能。

Linux中查看文本文件有多个命令，我们需要根据不同的文本文件，选择合适的命令来进行查看。

cat（concatenate的缩写）命令有三个功能：cat查看文件的用法非常简单，把想看的文件跟在命令后面即可：cat命令一次将文件的所有内容都输出到命令行中，如果文件较大，输出内容超过了命令行输出缓冲 OracleEBS导出EXCEL文件CSS样式应用 AlexLiu_2019的博客 06-06 5 OracleEBS导出EXCEL文件CSS样式应用 webpack5-基础入门-02-处理样式资源 weixin_40746230的博客 06-07 13 webpack5-基础入门-02-处理样式资源 JS-----第七章DOM编程 weixin_68509156的博客 06-06 27 DOM编程概述节点操作(增删改查)购物车发表说说JSON对象模板字符串 leaflet前端JS实现高德地图POI兴趣点批量分类下载(附源码下载) GIS之家专栏 06-06 17 前言 leaflet入门开发系列环境知识点了解： leafletapi文档介绍，详细介绍leaflet每个类的函数以及属性等等 leaflet在线例子 leaflet插件，leaflet的插件库，非常有用 内容概览 leaflet前端JS实现高德地图POI兴趣点批量分类下载 源代码demo下载 效果图如下： 具体实现思路： 1.高德开发平台注册账号，控制台创建应用... “相关推荐”对你有帮助么？ 非常没帮助 没帮助 一般 有帮助 非常有帮助 提交 ©️2022CSDN 皮肤主题：游动-白 设计师：我叫白小胖 返回首页 m0_59795537 CSDN认证博客专家 CSDN认证企业博客 码龄1年 暂无认证 21 原创 92万+ 周排名 9万+ 总排名 1万+ 访问 等级 220 积分 0 粉丝 2 获赞 2 评论 2 收藏 私信 关注 热门文章 http协议 2282 HTTP协议 1631 webpack五个核心配置项 1145 webpack基础概念 947 vue使用stylelint 829 分类专栏 stylelint 1篇 vue 3篇 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篇 目录 目录 分类专栏 stylelint 1篇 vue 3篇 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币套餐、付费专栏及课程。

余额充值