写点什么

🎅Less 快速学习(上)🎅

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

    阅读完需:约 9 分钟

🎅Less快速学习(上)🎅

Less

Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言, 它扩展了 CSS 语言,增加了变量Mixin函数等特性,使 CSS 更易维护和扩展。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题。


CSS 预处理语言主流为三种:SassLessStylus

  • Sass:最早也是最成熟的 CSS 预处理器

  • Less:简单和兼容 CSS

  • Stylus:在广泛的意义上人气还不如 Sass 和 Less

为什么要对 CSS 进行预处理

CSS 的低复用性,冗余的代码写法其实很让人头疼。如果需要写的 CSS 样式代码不多还好,一旦代码多起来,就会非常繁重,书写模块化开发中需要写很多重复的选择器。


语法不够强大,对于后期的管理和维护十分不友好,可能要从一堆代码中找到你要维护的地方。


没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护




快速学习 Less

安装

对于项目中less的安装,可以使用npm等包管理工具进行安装,也可以通过其他方式使用。


之前我曾推荐使用vs code的插件 Easy Less 来使用, 可以参考文章:《Vs Code快速使用Less,省略配置》 。 也可以参考官方安装方法:http://lesscss.cn/#using-less-installation


这里对于安装less就不做过多的描述了




变量(Variables)🐪

普通属性值定义

为了方便开发者,less中存在变量属性,有些类似于 CSS 自定义属性(--*),具体可见:https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*


less的变量定义写法:@ + 变量名


例子:

@width: 50%;@height: @width * 1.5;@color: #c7d63e;#app {    width: @width;    height: @height;    background-color: @color;}
复制代码

属性名和类名

这里的变量也都能够进行复用,当然变量不仅仅能够设定属性值,也可以设定属性名和类名,在使用时需要这样用@{变量名}

@m: margin;  // 属性名:margin@p: padding;  // 属性名:padding@mp: marpad; // 设定类名
.@{mp} { @{m}: 40px; @{p}: 10px 20px 30px 40px;}
复制代码


这里转换后就是正常的marpadmarginpadding属性设置了:

.marpad {  margin: 40px;  padding: 10px 20px 30px 40px;}
复制代码


注意: 这里对于类名通常很少会通过变量设定,因为

  1. less存在嵌套作用域等方法,类名也不需要过多定义

  2. 类名的定义通常也非常直接,通过驼峰等方式也可以与变量一样简单理解。

至于属性名等则是看个人了,如果觉得想少写些,可以用m等简写来代替margin

变量延迟加载

less变量延迟加载我觉得也可以叫做变量提升


JavaScript中存在变量提升和函数提升的概念,JavaScript 存在变量作用域,而less中也存在作用域。在less的变量延迟更加类似于函数提升。


js 示例:大家可以自己写一写下面的代码会输出哪两个值

function a11() {    console.log(5);}a11();function a11() {    console.log(3);}
function k() { a11(); function a11(){ console.log(7); } }k();
复制代码


这里会输出 3 和 7。 在方法执行时,会优先查找同级作用域下的方法,并且函数提升会将函数声明提升到最前面(函数表达式不会提升),所以外部的 a11()会先执行输出 3,而不是 5。 k 函数内部的 a11 会优先执行同级作用域下的方法,输出 7。


来看看less中类似的:

@a11: 5px;.a {    width: @a11;}@a11: 3px;
.k { .b { width: @a11; } @a11: 7px;}
复制代码


转换后 CSS:这里同级作用域下的 @11 被提升到使用之前了,所以.a 中就会为 3px。 同级作用域优先,.b 中为 7px

.a {  width: 3px;}.k .b {  width: 7px;}
复制代码



混合(Mixins)🐫

这是将一组属性从一个规则集混入到另一个规则集的方法。


举个例子


在开发中,常常会遇到显示文字过长的情况,这时我们可以设置文字超出变成省略号。 使用的语句如下:

white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
复制代码


但是当项目足够大时,文字过长的情况就会很多,如果每次都写这三句,也会觉得很麻烦(本懒人如此

普通混合

所以在less中的混入特性就非常方便了, 可以直接先定义好一个超出隐藏的 class,在需要的元素下通过.类名;的方式就能够将事前定义好的类属性也在该元素下施行。这种就属于简单的使用混合。


文字过长变省略号类:overflowTextapp元素使用该特性.overflowText;

@width: 100px;@height: 30px;@color: #c7d63e;/* 文字超出隐藏 */.overflowText {    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;}#app {    width: @width;    height: @height;    color: @color;    .overflowText();}
复制代码


转换的 CSS 代码:


带参混合

混合定义使用时还可以像JavaScript函数一样,携带参数。调用方式:.类名(参数1, 参数2...);

.funA(@w, @h, @color) {    width: @w;    height: @h;    color: @color;}.p1 {    .funA(10px, 20px, #f00);}.p2 {    .funA(30px, 200px, #ff0);}
复制代码


转换后 CSS:

.p1 {  width: 10px;  height: 20px;  color: #f00;}.p2 {  width: 30px;  height: 200px;  color: #ff0;}
复制代码


这种方式适用于大部分样式相同,但拥有些许差异的元素

带有默认值的带参混合

既让上面提到了带参混合,那么如果不传参时,能否设定一个默认值呢? 答案当然是可以的


对之前 css 代码稍作修改:

.funA(@w, @h, @color: #0f0) {    width: @w;    height: @h;    color: @color;}.p1 {    .funA(10px, 20px);}
复制代码


一般来说,默认参数最好放在最后,并且默认参数后的参数也必须使用默认参数。

命名混合

JavaScript调用函数传参时要按照顺便进行传参,但是在less带参混入中可以指定名称


比如:

.funA(@w, @h, @color: #0f0) {    width: @w;    height: @h;    color: @color;}.p1 {    .funA(@h:20px, @w: 100px);}
复制代码


这样转换出来的 css, p1 元素宽依旧是 100px,高是 20px



嵌套(Nesting)🐘

CSS样式是为了修饰HTML骨架,让页面变得充满血肉。


但是HTML中元素其实是层级嵌套的,所以最好在编写 css 也能够与html层级相匹配嵌套编写。而less中使用嵌套(nesting)代替层叠或与层叠结合使用的能力。


这一特性其实非常好用,在我眼里甚至比之前的变量更优。当然因为经常使用,所以也常常被忽略。


html

<div class="main">        <div class="left">            <div class="leftTop"></div>        </div>        <div class="right">            <div class="rightTop"></div>        </div>    </div>
复制代码


less

.main {    .left{        .leftTop {            width: 10px;        }    }    .right {        .rightTop {            width: 10px;        }    }}
复制代码



注释 🐼

编写代码后,维护的好手段就是写注释


在 less 当中,使用//编写的注释不会被生成到转换的 CSS 当中,只有/**/编写的注释才会在 CSS 当中出现

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

空城机

关注

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

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

评论

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