Less语言

2024-05-25 17:48:51
开发
35

Less是一门预编译语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展
Less也扩充了CSS语言，增加了诸如变量、混合运算、函数等功能。Less既可以运行在服务端(Node.js和Rhino平台)也可以运行在客户端(浏览器)

VSCODE可以使用Easy LESS插件（将less文件在编译后生成css文件）
在这里插入图片描述

Less的使用

注释

//这种注释，在编译后不会出现在CSS文件上
/*这种注释在编译后会出现在CSS文件上*/

使用Easy LESS的情况下，编译less文件会生成对应的.css文件，在普通html文件中引用时，引用生成的.css文件
在这里插入图片描述

Less变量

//使用值变量定义公共样式(便于统一修改样式)
@color:#999;
@bgcolor:skyblue;
@width:50%;
#wrap{
color:@color;
background-color:@bgcolor;
width:@width;
}

在这里插入图片描述

1.选择器变量

在这里插入图片描述

2.属性变量

在这里插入图片描述

3.url变量

在这里插入图片描述

4.声明变量

在这里插入图片描述

5.变量运算

在这里插入图片描述

6.变量作用域

跟js中变量的就近原则是一样的
在这里插入图片描述

7.用变量去定义变量

在这里插入图片描述

Less嵌套

&和嵌套的妙用

<body>
    <div class="center">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

</body>

在这里插入图片描述

媒体查询

在这里插入图片描述

混合方法

1.无参数方法

在这里插入图片描述

2.默认参数方法

Less可以使用默认参数，如果没有传参数，也将使用默认参数
@arguments犹如js中的arguments指代的是全部参数
传的参数中必须带着单位
在这里插入图片描述

3.方法的匹配模式

匹配匹配程度最高的函数，同时匹配参数全是变量的函数
在这里插入图片描述

4.方法的命名空间

在这里插入图片描述

5.方法的条件筛选

less中没有if-else,但是有一个when方法
在这里插入图片描述
要点：
1.比较运算符：>、>=、=、<=、<
2.=代表的是等于
3.除去关键字true以外的值都被视为false

6.数量不定的参数

在这里插入图片描述

7.方法使用important!

在这里插入图片描述

8.循环方法

在这里插入图片描述

9.属性拼接方法

拼接的过程中+代表,
+_代表空格
在这里插入图片描述

10.实战技巧

在这里插入图片描述

继承

1.extend关键字的使用

extend是Less的一个伪类，它可以继承所匹配声明中的全部样式
在这里插入图片描述

2.all全局搜索替换

在这里插入图片描述

3.减少代码的重复性

从表面上看，extend与方法最大的差别是extend是同个选择器共用一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性

导入

直接导入

在less文件中可以导入其他的less文件

@import "nav.less";

reference

Less中最强大的特性，使用引入的Less文件，但不会编译它

@import (reference) "nav.less"

once

@import语句的默认行为。这表明相同的文件只会被导入一次，而随后导入的文件的重复的代码都不会解析

@import (once) “foo.less”

multiple

导入多个同名文件，重复生成样式

@import (multiple) "foo.less"
@import (multiple) "foo.less"

条件表达式

类型检测函数

1.检测值的类型
2.iscolor
3.isnumber
4.isstring
5.iskeyword
6.isurl

单位检测函数

1.检测一个值除了数字是否是一个特定的单位
2.ispixel
3.ispercentage
4.isem
5.isunit

函数

函数库

less中封装了非常多的函数库，例如颜色定义，颜色操作，颜色混合，字符串处理等等
less函数手册

原文地址:https://blog.csdn.net/m0_51195865/article/details/138712509 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1794304611293728768.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部