写点什么

🎅Less 快速学习(下)🎅

作者:空城机
  • 2021 年 11 月 19 日
  • 本文字数:2697 字

    阅读完需:约 9 分钟

🎅Less快速学习(下)🎅

Less

本文承接上文《Less快速学习(下)》,对 less 进行学习总结。

运算(Operations)

在 less 中,算术运算符可以对任何数字、颜色或变量进行运算,与calc有些类似


思维导图:


单位推断

less 会为你自动推断数值的单位,所以不必每一个值都加上单位,如果是calc不加单位就会失效


例子:

@width: 10 + 5px - 3;.cal {    width: @width;}
复制代码


这里虽然只有 5px 有单位,但是也依旧可以成功转换

.cal {  width: 12px;}
复制代码


注意:运算符与值之间必须以空格分开。如果不隔开,将生成错误的转换结果

@width: 10 +5px -3;

转换结果: width: 10 5px -3;

运算优先级

涉及到优先级计算,应当使用()区分优先级计算,否则将乘除的优先级将会大于加减优先级

颜色值运算

less在运算时,先将颜色值转换为 RGB 模式,然后再转换为 16 进制颜色值并返回


两个十六进制计算:#100001 + #002200 = #102201 如果转换为 10 进制就是:1048577 + 8704 = 1057281


1057281的十六进制就是102201


接下来来看这个例子:这里生成的结果不是#000001

// 这里的1转换为rgb(1,1,1) 实际上就是#010101color: #000000 + 1;  
复制代码


因为 1 其实指的是rgb(1,1,1),如果是 10 的话,那么也就是rgb(10,10,10)。 因为 rgb 不会超过 255,所以如果运算时超过,就会默认为rgb(255,255,255)也就是#ffffff




函数

Less 提供了许多用于转换颜色,处理字符串和进行算术运算的函数,这些函数使用起来非常简单。特别是其中有关于颜色部分的函数。




命名空间(namespace)

出于组织结构或仅仅是为了提供一些封装的目的,你希望对混合(mixins)进行分组。因为之前说过,有作用域的影响,所以不同作用域下的混入会失败,比如下面的例子:

#div1 {    .color {        color: red;    }}
#div2 { .rect { .color(); // 找不到color }}
复制代码


所以可以使用命名空间的方式,来用链式结构去调用你需要混入的元素样式。这里可以使用#div1.color来混入 div1 下的 color 元素

#div1 {    .color {        color: red;    }}
#div2 { .rect { #div1.color; }}
复制代码


转换的结果:

#div1 .color {  color: red;}#div2 .rect {  color: red;}
复制代码




引入(@import)

less中,可以引入一个或多个.less 文件,然后这个文件中所有变量可以在当前 less 项目中使用。 这一点与 css 中引入其实是类似的。


引入的命令是@import


并且可以携带参数, 使用方式@import (参数1, 参数2) 文件地址





条件表达式

在 less 专门为混合定义了条件判断语法,使用 when 关键字进行判断,只有当条件满足时执行括号中的代码。


思维导图:


when 关键字

比如下面就是对设定的变量 width 进行宽度判断的方法,如果宽度超过 100px 设置为 100px,否则使用传入的参数值

@width: 110px;// 宽度判断setwidth.setwidth (@w) when ( @w > 100px ){    width: 100px;}.setwidth (@w) when ( @w <=100px ){    width: @w;}.class1 {    .setwidth(@width);}
复制代码


转换后 CSS:

.class1 {  width: 100px;}
复制代码


并或非

在条件表达式判断时,还可以使用并或非进行多条件判断。


实例:

// 如果参数1为5px并且参数2为10才成立.fn1(@arg1, @arg2) when(@arg1 = 5) and (@arg2 = 10) {    width: 10px;    height: 10px;}// 参数1大于5或者参数2大于等于10即可成立.fn2(@arg1, @arg2) when(@arg1 > 5) , (@arg2 >= 10) {    width: 10px;    height: 10px;}// 除了参数1大于5的情况都可以成立.fn3(@arg1, @arg2 : 10) when not (@arg1 > 5) {    width: 10px;    height: @arg2;}
.a { .fn1(5, 10);}.b { .fn2(1, 10);}.c { .fn3(1);}
复制代码


转换的 CSS 代码:

.a {  width: 10px;  height: 10px;}.b {  width: 10px;  height: 10px;}.c {  width: 10px;  height: 10;}
复制代码


乍一看好像使用条件表达式的 less 非常复杂,但是写完表达式后的可复用性就很高了,对于需要条件多的 css 样式就能起到节约代码并整理结构的效果了


类型检查函数

less当中,还存在类型检查函数,检查是否符合类型,可以据此配合条件判断进行使用


  • iscolor: 值是颜色,则返回 true,否则返回 false

  • isnumber: 判断值是否是数值

  • isstring: 判断值是否是字符串

  • iskeyword: 判断值是否关键字

  • isurl: 判断值是否是 url


类型检查函数

检查一个值除了数字外是否有一个特定的单位


  • ispixel: 判断是否存在像素单位

  • ispercentage: 判断是否存在百分比

  • isem: 判断是否存在 em 单位

  • isunit:判断是否存在指定类型




循环(Loop)

less中,混合可以调用它自身,这一点就很类似于JavaScript当中的递归调用了,当一个混合递归调用自己,再结合条件表达式和模式匹配这两个特性,就可以写出循环结构。

递归

实例:塑造一个循环 css,创造 ul 下的 10 个 li,并且 li 的宽度逐步增大


// 递归函数定义.loopfn(@count) when(@count > 0) {    .loopfn((@count - 1)); // 递归调用自身    .li:nth-child(@{count}) {        width: 10px * @count;    }}// 函数调用.ul {    .loopfn(10);}
复制代码


转换的 CSS 代码:

.ul .li:nth-child(1) {  width: 10px;}.ul .li:nth-child(2) {  width: 20px;}.ul .li:nth-child(3) {  width: 30px;}.ul .li:nth-child(4) {  width: 40px;}.ul .li:nth-child(5) {  width: 50px;}.ul .li:nth-child(6) {  width: 60px;}.ul .li:nth-child(7) {  width: 70px;}.ul .li:nth-child(8) {  width: 80px;}.ul .li:nth-child(9) {  width: 90px;}.ul .li:nth-child(10) {  width: 100px;}
复制代码

each 函数

less中,其实还有一个each函数也可以做到循环。它的功能是将规则集的计算绑定到列表的每个成员


使用方式:each(变量, { ... }),其中 @value 可以代表变量列表的值,@key 可以代表变量列表的 key 值。


实例:

@colorList: {    1: blue;    2: red;    3: yellow;    4: green;}
each(@colorList, { .set@{value} { color: @value; }});
复制代码


转换的 CSS 代码:

.setblue {  color: blue;}.setred {  color: red;}.setyellow {  color: yellow;}.setgreen {  color: green;}
复制代码




映射(Maps)

在之前说过,less可以通过命名空间来找到需要使用的混入,这一点很像JavaScript.


这里的映射是将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。此方式很像 JavaScript 中的数组。


实例:

#father {    width: 100px;    height: 70px;    color: #f00;}
.son1 { width: #father[width]; // 类似于JS数组引用}.son2 { height: #father[height]; color: #father[color];}
复制代码


转换的 CSS 代码:

#father {  width: 100px;  height: 70px;  color: #f00;}.son1 {  width: 100px;}.son2 {  height: 70px;  color: #f00;}
复制代码


发布于: 2 小时前阅读数: 5
用户头像

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者,在线水文 主要干前端的活,业余会学学python 欢迎各位关注,互相学习,互相进步

评论

发布
暂无评论
🎅Less快速学习(下)🎅