less混合 + less计算

已于 2022-02-25 15:41:22 修改
阅读量4.3k 收藏 6
点赞数 4
分类专栏： less 文章标签： less
于 2020-11-01 16:53:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45821251/article/details/109403617
版权

目录

less中的混合

混合的意思：
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
通俗来讲，规则集即指一套代码，一套定义一定规则的代码，比如一套定义样式的代码，就是一个规则集
比如：在这里插入图片描述
这里面的样式就是一个规则集
混合就是把一套规则集用于另一个元素上面

混合类别：

普通混合
不带输出的混合
带参数的混合
带参数并且有默认值的混合
带多个参数的混合
命名参数
匹配模式
arguments变量

普通混合

即直接写一个不影响html中元素的选择器，然后代码体里面写上规则集，然后直接让其他规则集调用
在这里插入图片描述
这种方法会使less在编译为css时把不该编译到css中的选择器#diaoyong也给编译进去

不带输出的混合

在选择器后面加上()就不会被编译到``css```中了
在这里插入图片描述

调用的时候加不加()都行

带参数的混合

参数就是变量所以，我们就跟函数一样可也设置形参也可向里面传实参，但是注意，咱这是混合，不是函数
在这里插入图片描述
定义形参@a设置形参为background-color的属性值，等于此时这是一个background-color值可变的一个规则集，然后下面调用的同时进行传参，改变background-color的值

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

设置默认值的方法：形参变量:值，设置了默认值后，当不给形参传入值的时候，这些变量的值就自动设置为默认值
在这里插入图片描述
注意，只有设置了默认值的形参，在调用的时候可以不用在括号里声明，但是没有设置默认值的形参，在调用的时候，若括号里没有声明则会报错

带多个参数的混合

在这里插入图片描述

就这种，带多个参数的混合

命名参数

当我们的混合有多个形参，我们可以为其中特定的无默认值或者，需要改变默认值的形参来进行复制
在调用的时候指定变量名，并为他特意赋值
在这里插入图片描述
可以做到只修改形参里一些特定变量的默认值

匹配模式

这个混合类似于函数的重载，我们写多个同名同形参的混合，但我们里面的功能不一样，我们可以给每个同名混合的形参前面加上一个字符来作为他的标识符，来区别于其他的同名混合
在这里插入图片描述
如果我们给某一同名混合的前面加上一个@_则他会变成一个自动调用混合，即当我们调用其他同名的混合的时候，系统会自动同时调用这个混合

调用某一同名混合的方法：
当我们调用其中某一个混合，我们可以在实参列表前面加上某一同名混合特有的表示符，来告诉系统我们到底要调用哪个同名混合
即匹配哪个同名混合，(匹配模式)
在这里插入图片描述
这里也会自动调用加上@_的同名混合，第一行是引入其他less文件

less中引入其他less文件

即我们可以复杂而且多用的代码写在一个less文件中，然后其他文件调用传值，类似于封装
在调用其他less中的混合之前，我们需要在调用前面放上声明
语法：
@import "路径"
在这里插入图片描述
这样可以直接在一个less文件中使用其他less文件中的内容

arguments变量

用于简化在混合里面调用形参
比较鸡肋，即类似于js中的隐藏数组

即我们混合里面写上@arguments那么@arguments的值就等于所有形参的值，如下图，@arguments的值为1px solid black
在这里插入图片描述
也可以写多个@arguments每个@arguments的值都一样，都是所有形参的值
这里，

less计算

在less中可以进行加减乘除，比如100 + 100px当然，在less中，运算的双方可以只有一方加单位，在运算的时候，最好在值和运算符号之间加一个空格，不然可能会出错

calc()运算函数

你好牛蛙
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
less css预处理语言 less介绍
qq_43158726的博客
09-30 508
1.关于less 它是一门CSS预处理，扩充了CSS语言，增加了变量、Mixin混合、函数特性等，使css更容易维护和扩展。它不是一种直接使用的语言，而是生成css的语言。less可以运行在node或者浏览器端。 （常见的css预编译器有三种：less、sass、stylus） less中的注释 以//开头的注释，不会被编译到css文件中。 以/**/包裹的注释会被编译到css文件中。 less中的变量 使用@来声明一个变量：@pink： pink； 作为普通变量属性值来使用：直接使用@pink @pi
Less 运算
天空之外
10-20 1354
Less 语言中支持运算，我们可以给变量进行一些运算操作，例如加 +、 减 -、乘 *、除 / 四个运算符，这四个运算符可以对任何数字、颜色或变量进行运算。一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。 运算的使用 运算的使用其实很简单，就是对属性值或变量进行一些加减乘除运算。 示例： 我们来看下面这段 HTML代码： <!DOCTYPE html> <html> <head>
less运算
m0_52380041的博客
04-04 2742
在less中可以进行加减乘除的运算 在less中，一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。 下面用一个例子来解释 less文件 @col:#123456; .color(@c) { color: @c+@col; } .border(@width:1px) { border: @width*5%; } .textarea1 { .border( 2px); .color(#111111);
Less：less运算规则（加减乘除及定义变量）
weixin_46682277的博客
01-24 9031
在less文件中，任何数字、颜色或变量都能参与运算，就是less提供了（+）（-）（*）（/）算术的运算。 代码示范： /*是在less文件里写*/ @width:10px + 5; div { /*其实就变成了15px的边框*/ border:@width solid skyblue; } /*生成的css文件是这样的*/ div { border:15px solid skyblue; } /*甚至还以带小括号，比如说下面这种 和数学中的一样，先算小括号再去相乘*/ width:(@width +
CSS 预处理 语言 - Less（2）- 混合、运算
JHY97的博客
05-24 745
一、less中的混合 混合就是将一系列属性从一个规则集引入到另一个规则集的方式 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。 以案例说明： html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"
less 运算、函数
webxiaoma
05-26 7671
**今天来说一下less的运算和函数。less 运算还是比较简单的， 其函数主要是less为css添加了一些函数功能，也不是很难，记住它就行。如果实在记不住，知道有这个函数就行。**一、less 的运算less的运算很简单我直接上代码，大家应该就可以看懂。
Less的入门及使用—变量、嵌套规则、混合、运算、避免编译、继承(附代码演示)
王春燕的博客
04-15 2826
一、less简介 less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 less的中文官网：
CSS3 - Less中calc计算属性
idomyway的博客
06-18 3735
前言     在写普通的CSS样式时，计算属性的写法如下： .box { widhth: 100%; height: calc(100% - 50px); } Less中的写法 .box { width: 100%; height: calc(~"100% - 30px"); // 效果相同 height: ~"calc(100% - 60px...
Less系列之函数（Functions）
老__L的博客
05-03 4738
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法： 1、Logical函数 1.1、if 根据条件返回两个值的一个。 输出 注：一个布尔表达式支持和守卫声明一样的条件参数。 注：在3.6之前，条件需要一组括号。 1.2、boolean 计算结果为真或者假你可以"存储"在守卫或 评估的 boolean。 输出 2、字符
Less学习--逻辑运算、属性规则集
hide_in_darkness的博客
07-24 875
逻辑运算 // 算术运算符±*/会在计算之前考虑单位并转换 @base:5%; @couversion-1:5cm+10mm; 属性规则集 可以自己定义一个CSS属性集 @detached-ruleset:{ background:red; width: 100px; height: 200px; }; .top_list_goup{ @detached-ruleset(); //调用时必须加上() } 可以在属性规则集中采用@media冒泡 @my-ruleset: { .my-se
less的用法与函数
weixin_47863547的博客
03-29 6294
简单概括 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言，其属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性 一.用法 1.变量 @w:200px; @h:200px; //宽高 .box{ border:2px solid red; width:@w; height: @h*(1/2); } <div class="box"></div> 2.混合（Mixins） @b
less快速入门
gufudhn的博客
08-15 779
概览 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。 安装与使用 在 Node.js 环境中使用 Less ： npm install -g less> lessc styles....
移动Web——less
最新发布
weixin_48719464的博客
02-04 725
写法：在less文件的第一行添加 // out: 存储URL。写法：在less文件第一行添加：// out: false。语法：导入：@import "文件路径";提示：如果是less文件可以省略后缀。作用：存储数据，方便使用和修改。作用：导入less公共样式文件。提示：文件夹名称后面添加 /作用：快速生成后代选择器。概念：容器，存储数据。
详解Less运算符和函数
qq_32506555的博客
07-22 1636
今天给大家写一篇关于Less运算符和函数的less学习教程 ，有什么问题一起探讨。   运算符   Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点：   1. 运算数与运算符间必须用空格分隔；   2. 以第一个运算数的单位作为运算结果的单位；     Less源码：   // 运算数与运算符间没有空格 @fa
less函数
weixin_30410999的博客
08-18 89
Less函数介绍 escape(@string); // 通过 URL-encoding 编码字符串 e(@string); // 对字符串转义 %(@string, values...); // 格式化字符串 unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位 color(@string); // 将字符串解析为颜色值 data-u...
less计算宽高正确写法
weixin_41848005的博客
08-11 3700
在less中正确使用calc
LESS函数总结
chen__cheng的博客
05-20 2726
LESS函数总结3.1 String函数系列3.1.1 escape(@string)编码3.1.2 e(@string)转义3.1.3 %(string,arguments...)格式化字符串3.1.4 Replace替换3.2 list函数系列3.2.1 length函数3.2.2 extract函数3.3 Math函数系列3.3.1 ceil3.3.2 floor3.3.3 percentage3.3.4 round3.3.5 sqrt(number)3.3.6 abs(number)3.3.7 po
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
每一次跌倒都是为了华丽的站起来。
03-03 646
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS） 复习：从零开始学前端：形变 — 今天你学习了吗？（CSS：Day21） 文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第二十二节课：css3新属性scss和less一、CSS3滤镜属性二、CSS3计算属性三、less和sass的概念四、less和sass的变量五、less和sass的嵌套六、less和sass的访问符七、less的混入八、sass的混入九、less和sass的总结十、HTML5语义化标
使用less实现根据类名控制样式
qq_24882601的博客
01-12 1166
不知道大家有没有这样一个需求, 就是我在dom上增加'.mr50'这样一个class类名, 那么就对应'margin-right:50px'; 如果是'.mr40'就对应'margin-right:40px'. 其实这个可以通过less的for循环实现. 代码如下 @unit: 1px; .base(@i) when (@i<=50) { @size: @i * 5; .base(@i + 1); .m@{size} { margin: @size*@unit;...
Less运算和函数
歪脖先生的博客
11-20 4479
Less运算和函数 Less运算 在我们的 CSS 中，充斥着大量数值型的 value，比如 color、padding、margin 等。在某些情况下，这些数值之间是有着一定关系的，那么我们怎样利用 Less来组织这些数值之间的关系呢？请看以下Less代码： @init: #111111;@transition: @init*2;.switchColor {    color: @tr
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值