less的使用

最新推荐文章于 2023-02-07 11:38:52 发布
最新推荐文章于 2023-02-07 11:38:52 发布
阅读量761 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54625720/article/details/115921965
版权

初识less

中文官网 http://lesscss.cn/

在这里插入图片描述
在这里插入图片描述

定义变量

less中定义变量使用的是@ 如下图所示：定义属性值的变量
在这里插入图片描述
第一、二、行是定义变量（定义颜色）。第5、7行是使用变量

二、作为选择器和变量名及使用

在这里插入图片描述
三、作为url 路径时定义变量
在这里插入图片描述
在这里插入图片描述

定义多个相同名称的变量时

在当前作用域由下向上，取最近，最新定义的一个的值
在这里插入图片描述

一、混合

在这里插入图片描述

普通混合

如上图所示，是普通的混合，h1，h2 都含有第2、3行相同的内容，就使用混合

二、混合不带输出

如果想让1至4行不输出到css中时 如下图所示：在后面加上（）
在这里插入图片描述

三、带有选择器的混合

在这里插入图片描述

编译结果为
在这里插入图片描述

图一中的& 代表的是他的父级选择器！！

四、 带参数的混合

在这里插入图片描述

五、 带参数并且有默认值的混合

在这里插入图片描述

六、带多个参数的混合

在这里插入图片描述

七、定义多个具有相同名称和参数数量的混合

在这里插入图片描述

八、@arguments 代表所有的形参集合

在这里插入图片描述

九、匹配模式

在这里插入图片描述

得到混合中的返回值（计算）

在这里插入图片描述

嵌套规则

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运算！！

在这里插入图片描述
颜色的运算必须转化为rgb格式16进制的进行运算

函数（简单概念）

在这里插入图片描述

命名空间

在这里插入图片描述

作用域

在这里插入图片描述

引入

在这里插入图片描述

在这里插入图片描述

条件表达式

when为关键字 lightness 是来判断颜色 返回值为 百分比
在这里插入图片描述

类型检查函数

在这里插入图片描述
在这里插入图片描述

单位检查函数

在这里插入图片描述
在这里插入图片描述

循环（loop）

在这里插入图片描述
在这里插入图片描述

合并属性

在这里插入图片描述
在这里插入图片描述

函数库

在这里插入图片描述

一、其他函数

在这里插入图片描述
color（）函数 将颜色字符串转化为颜色值
convert（）函数 将数字的单位转换，
在这里插入图片描述
data-url（）将图片转化为base64位
在这里插入图片描述

在这里插入图片描述
default（）
在这里插入图片描述
unit（）
如果只写第一个参数（100px），会将单位移除（100）
在这里插入图片描述

二、字符串函数

在这里插入图片描述
escape（） 将字符串转义为特殊符号
在这里插入图片描述
el（）函数
在这里插入图片描述
%（）函数
在这里插入图片描述
replace（）函数
在这里插入图片描述

长度相关的函数

在这里插入图片描述

数学函数

在这里插入图片描述

cell（）函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

类型函数

用来判断传进的值是否符合规定的类型的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

颜色值定义函数

在这里插入图片描述

颜色值通道提取函数

在这里插入图片描述

颜色值运算函数

在这里插入图片描述

颜色值混合函数

在这里插入图片描述

西安尤雨溪
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目中less的样式用data中的数值
robotkirin的博客
06-26 1717
【代码】vue项目中less的样式用data中的数值。
Less-条件判断
堇年
10-06 9570
less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合的代码 when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进条件判断 (),()相当于JS中的|| /* 当下边 div 中 .size 传入的第一个参数是100px或者第二个参数是100px才会执行*/ .size(@width,@height) w...
前端less、scss使用data定义的数据
FUFCY的博客
09-08 1363
111
less 判断变量是否存在
weixin_40968646的博客
02-07 522
less判断变量是否存在
LESS第七课(条件判断)
qq_37805832的博客
07-23 1013
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码 when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断 */
less使用教程
04-09
less使用的入门教程,详细介绍less的使用方法
less使用demo( css预处理语言)
03-20
Less使用变量和嵌套规则来简化样式表，使其更易于维护和修改，从而减少了代码量。 更好的可读性： Less的嵌套规则使代码更易于阅读和理解，使开发人员更容易找到所需的代码块。 更高的可重用性： Less的变量和混合...
less-plugin-pleeease:后处理 Less 使用pleeease
06-29
后处理 Less 使用pleeease。 较少使用 npm install -g less-plugin-pleeease 然后在命令行上， lessc file.less --pleeease="browsers" 浏览器是由逗号分隔的列表。 允许您一次性覆盖多个选项。 接受与 ...
vue2中使用less简易教程
08-27
Vue2 中使用 Less 简易教程 Vue2 中使用 Less 是非常简单的，因为不需要手动配置 Webpack。只需要安装 Less 和 Less-loader 就可以了。在本教程中，我们将介绍如何在 Vue2 中使用 Less，并且详细解释每一个步骤。 ...
css 媒体查询 aspect-ratio less 使用方法
12-13
css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下：   // 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图样式 @media screen and (min-...
Less
01-07
Less基础 css存在的弊端 css是一门非程序式与语言，没有变量、函数、scope（作用域）等概念 css需要书写大量看似没有逻辑的代码，css冗余度是比较高的 不方便维护和扩展，不利于复用 ...使用less -v
浏览器端如何使用Less
09-25
浏览器端使用Less是一种提高CSS编写效率的技术。Less是一种动态样式表语言，由Alexis Sellier设计，最初基于Ruby，后来逐步转向JavaScript实现。它扩展了CSS的语法，提供了变量、嵌套规则、运算符、函数等功能，使得...
使用vue + less 实现简单换肤功能的示例
08-28
使用 Vue + Less 实现简单换肤功能示例 本示例旨在展示如何使用 Vue 和 Less 实现简单的换肤功能。通过定义变量、使用 Less 函数和 JavaScript 事件来实现换肤效果。 知识点一：使用 Less 定义变量 在本示例中，...
微信小程序中用WebStorm使用LESS
08-31
微信小程序中使用 WebStorm 和 LESS 微信小程序中使用 WebStorm 和 LESS 是一个非常实用的技术栈，能够帮助开发者快速地构建微信小程序。LESS 是一种功能强大的 CSS 预处理语言，可以帮助开发者更方便地编写 CSS ...
postcss-less:用于解析LESS的PostCSS语法
05-13
要编译LESS，请使用LESS的官方工具集。 安装 使用npm： npm install postcss-less --save-dev 如果您发现此模块有用，请考虑。 用法 无postcss-less的最常见用法是将PostCSS转换直接应用于LESS源。 例如。 以LESS...
11_less中的条件判断
没得简介
12-06 3157
less中可以通过when混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码 when表达式中可以使用比较运算符(> < >= <= =),逻辑运算符,或检查函数来进行条件判断 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> .
在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量
热门推荐
qq_43305958的博客
08-21 1万+
在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量一、less是什么？二、操作步骤1.引入库2.设置style的lang属性3.使用less总结 一、less是什么？ Less是一种CSS的扩展和动态样式表语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。Less是一种开源语言，也是跨浏览器兼容的语言。 二、操作步骤 1.引入库 代码如下（示例）： npm install less-loader@4.1.0 --save
跟我一起了解less（3）：判断和循环
weixin_30535843的博客
05-10 715
官网的api中，判断和循环是page的后面才被说明的，可能官方认为它们两个也属于“混合”。 但为了更好的学习less，我把它拿到了这章先来了解一下。 注：例子截图是转换成css的语句 1、判断：官网称作Mixin Guards （1）语法规则：when ( 布尔值 ) { 内容 } //用法一:when放在函数后面.change(@color) when (lightness(@c...
less超详细介绍
WUYOU798的博客
03-28 6479
一、Less介绍 1、官方介绍 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 2、自己理解 Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。试想如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给Html标签设置样式。比如一个最常见的需求，在当前浏览器的宽度小于500px的
less 使用自定义函数
最新发布
05-31
要在less命令中使用自定义函数，可以使用lesskey工具创建一个按键映射文件，然后在文件中定义自定义函数并将其与按键绑定。以下是一个示例： 1. 创建一个文件，比如说lesskeyrc： ``` touch lesskeyrc ``` 2. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值