🎅Less快速学习(上)🎅

举报
空城机 发表于 2021/11/29 16:55:54 2021/11/29
【摘要】 Less Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言, 它扩展了 CSS 语言,使 CSS 更易维护和扩展

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代码:

混入.png

带参混合

混合定义使用时还可以像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当中出现

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200