移动Web：Less 预处理及Koala工具

news2024/11/27 5:28:40

css 预处理器，后缀名为 .less。

less 代码无法被浏览器识别，实际开发需要转换成 css，使用 liink 标签引入 css 文件。

插件工具

Easy Less

VS Code 内置插件（less 文件保存自动生成 css 文件）

更改编译后 css 存储路径

  • 设置 – 搜索 less -- Easy LESS:compile
  • settings.json 中编辑 – “out” : “../css/”

Koala 工具 (了解)

考拉客户端：http://koala-app.com/index-zh.html

在线将 less 文件转为 css 文件。


Less 语法

单行注释不会被编译。

变量

和 javascript 一样，也有局部变量和全局变量。

  • 定义在 {} 外面的就是全局变量，可以在任意地方使用。
  • 定义在 {} 里面的就是局部变量，只能在 {} 中使用。
// 定义变量：
@变量名: 值;
@width: 200px;

// 使用变量：
css属性: @变量名;
width: @width;

插值变量

属性名称或者选择器名称都可以使用变量。

// 语法格式：
@{变量名称};

// 实例：
@width: 800px;
@w: width;
// 调用：
@w: @width;

less 运算

支持 + - * / 运算。

@w: 200px;
@h: 200px;

.father {
    width: @w;
    height: @h;
    background: #f00;
    position: absolute;
    top: 50%;
    left: 50%;
    // css3 新特性 存在兼容性问题
    // transform: translate(-50%， -50%);
    margin-top: -(@w / 2);
    margin-left: -(@h / 2);
    
    .son {
        width: 100px;
        height: 100px;
        background: #00f;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -(100px / 2);
        margin-left: -(100px / 2);
    }
}

calc 方法

calc() 函数用于动态计算长度值。

@w: 200px;
@h: 200px;

.father {
    width: @w;
    height: @h;
    background: #f00;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(-@w / 2);
    margin-left: calc(-@w / 2);
}

混合

将代码打包到一起，提高复用性，本质就是：CV。

注意：

  • 如果混合名称后面没有 {}，预处理时会保留混合的代码。
  • 如果混合名称后面加上 {}，预处理时不会保留混合的代码。

定义一个 .center，再通过 .center() 进行调用。

.center {
    position： absolute;
    top: 50%;
    left: 50%;
    transition: translate(-50%, -50%);
}

.father {
    width: 200px;
    height: 200px;
    background: #f00;
    .center();
    
    .son {
        width:100px;
        height:100px;
        background: #00f;
        .center();
    }
}

带参数的混合

参数可以有默认值。

@num: 50px;

// 1.打包
.radius (@num: 100px) {
    -webkit-border-radius: @num;
    -moz-border-radius: @num;
    -o-border-radius: @num;
    -ms-border-radius: @num;
    border-radius: @num;
}

// 2.调用
p {
    .radius(@num);
}

可变参数

类似 js 中的 arguments，可以拿到传递进来的所有形参。

// 语法格式：
@arguments

.animate(@ name, @time, @mode, @delay) {
    transition: @arguments;
}

div {
    .animate(all, 2s, linear, 3s);
}

展开运算符

如果形参使用了 ...，那么必须写在形参列表最后。

当参数数量不确定 或者 部分参数可传可不传时 使用。

// @name 和 @time 是必传的参数，其他参数可传可不传。
.animate(@name, @time, ...) {
    transition: @arguments;
}

div {
    .animate(all, 2s, linear, 3s);
}

匹配模式

通过混合的第一个字符串形参，来确定具体要执行哪一个同名混合。

// 上三角
.triangle ('up', @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: @color transparent transparent transparent;
}
// 右三角
.triangle (right, @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: transparent @color transparent transparent;
}
// 下三角
.triangle ('bottom', @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: transparent transparent @color transparent;
}
// 左三角
.triangle ('left', @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
    border-color: transparent transparent transparent @color;
}

// 调用，匹配 up
div {
    .triangle('up', @width: 40px, @color: #f00);
}

通用匹配模式

无论同名的哪一个混合被匹配了，都会先执行通用匹配模式中的代码。

// 抽出通用匹配样式
.triangle (@_, @width, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @width;
}

// 上三角
.triangle ('up', @width, @color) {
    border-color: @color transparent transparent transparent;
}
// 右三角
.triangle (right, @width, @color) {
    border-color: transparent @color transparent transparent;
}
// 下三角
.triangle ('bottom', @width, @color) {
    border-color: transparent transparent @color transparent;
}
// 左三角
.triangle ('left', @width, @color) {
    border-color: transparent transparent transparent @color;
}

// 调用，匹配 up
div {
    .triangle('up', @width: 40px, @color: #f00);
}

less 导入

类似于模块化思想，解决 less 文件依赖，复用问题。

导入后可以直接调用该文件内写好的样式。

导入

独立 Less 文件之间相互引用，可以省略 .less 后缀。

@import "路径";

禁止导入

在 less 文件第一行添加 outL false 。

out: false;

less 内置方法

less 的底层是 javascript 实现的。

字符串替换

// 语法格式：
replce(“原字符串”, “要替换的参数”, “替换后的参数”);

replce(“abc”, “a”, “p”);	// pbc

判断类型

说明语法结果
判断是否包含数字isnumber(56px);true
判断是否包含字符isstring(“string”);true
判断是否包含颜色iscolor(#f00);true
判断是否包含像素ispixel(56px);true
判断是否包含emisem(7em);true
判断是否包含百分比ispercentage(8%);true

颜色操作

说明语法
增加饱和度saturate(color, 20%);
减少饱和度desaturate(color, 20%);
增加亮度lighten(color, 20%);
减少亮度darken(color, 20%);
降低透明度fadein(color, 20%);
div {
    width: 200px;
    height: 200px;
    background: rgb(234, 233, 212);
}

div:hover {
    width: 200px;
    height: 200px;
    // 减少饱和度
    background: desaturate(rgb(234, 233, 212), 20%);
}

层级结构

& 符号表示对父选择器的引用

  • 结合伪类使用，如：:before。
  • 结合伪元素使用，如：:hover。
.father {
    .son {
        & {不生成后代关系，表示当前选择器，方便代码迁移}
    }
}

.son {
    &::before {
        content: '新增内容';
    }
    &:hover {
        color: #f00;
    }
}

:before 不可以添加 :hover 效果，伪类对不生效。


less 继承

类似于 js 中的继承，方便代码复用，便于代码维护。

// 语法格式：
.类名:expend(父类);

.center {
    position： absolute;
    top: 50%;
    left: 50%;
    transition: translate(-50%, -50%);
}

.father:expend(.center) {
    width: 200px;
    height: 200px;
    background: #f00;
    
    .son:expend(.center) {
        width:100px;
        height:100px;
        background: #00f;
    }
}

less 中的继承 和 less 中混合的区别：

  1. 使用时的语法格式不同。

    混合：.类名()

    继承：:expend(父类)

  2. 转换后的结果不同（混合是直接可拷贝，继承是并集选择器）

20210528114005735


less 条件判断

less 中通过 when 给混合添加限定条件，满足才会执行混合中的代码。

when 中可以使用比较运算符(> < >= <= =)、逻辑运算符 或 函数来进行判断。

  • and：并且
  • , ：或者

条件中除了可以使用比较运算符，还可以使用内置方法。

// 并且
.size1 (@w, @h) when (@w = 400px) and (@h = 400px) {
    width: @w;
    height:@h;
}
// 或者
.size2 (@w, @h) when (@w = 400px), (@h = 400px) {
    width: @w;
    height:@h;
}
// 内置方法
.size3 (@w, @c) when (iscolor(@c)) and (@w = 100%) {
    width: @w;
    color: @c;
}

div {
    .size1(300px, 400px);	// false
    .size2(300px, 400px);	// true
    .size3(#f00, 100%);		// true
}

案例：京东 - 两列布局

.commodity {
    width: 100%;
    overflow: hidden;
    padding: 5px;
    
    .item {
        float: left;
        width: 50%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }
    
    .item:nth-child(odd) {
        padding-right: 2.5px;
    }
    .item:nth-child(even) {
        padding-left: 2.5px;
    }
}

20210528152545585

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/4076.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

华清远见11.7

华清远见11.7

系统移植开发阶段部署 1.准备文件&#xff0c;由于内核只支持安全的启动模式&#xff0c;要准备u-boot镜像文件u-boot-stm32mp157a-fsmp1a-trusted.stm32 TF-A镜像文件tf-a-stm32mp157a-fsmp1a-trusted.stm32 linux内核镜像文件uImage和stm32mp157a-fsmp1a.dtb 根文件系统r…
阅读更多...
QT 中多线程实现方法总结

QT 中多线程实现方法总结

第一&#xff1a; 用QtConcurrentRun类&#xff0c;适合在另一个线程中运行一个函数。不用继承类&#xff0c;很方便 第二&#xff1a;用QRunnable和QThreadPool结合。继承QRunnable&#xff0c;重写run函数&#xff0c;然后用QThreadPool运行这个线程。缺点是不能使用信号和槽…
阅读更多...
html5 -- canvas使用(1)

html5 -- canvas使用(1)

canvas 设置canvas标签 添加宽高 默认单位为px <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport&…
阅读更多...
荧光标记氨基酸：荧光标记DL-天门冬氨酸，荧光标记甘氨酸-DL-天冬氨酸，DL aspartic acid labeled

荧光标记氨基酸：荧光标记DL-天门冬氨酸，荧光标记甘氨酸-DL-天冬氨酸，DL aspartic acid labeled

产品名称&#xff1a;荧光标记甘氨酸-DL-天冬氨酸&#xff0c;DL aspartic acid labeled 甘氨酸-DL-天冬氨酸是一种化学物质&#xff0c;化学式是C6H10N2O5&#xff0c;分子量是208.17。 DL-天门冬氨酸(DL-Asp)在医药方面有着重要的用途,可用于合成DL-天门冬氨酸钾镁盐(脉安定…
阅读更多...
云原生之K8s—yaml文件

云原生之K8s—yaml文件

目录 一、K8S支持的文件格式 1、yaml和json的主要区别 二、YAML 2.1、查看API资源版本标签 2.2、编写资源配置清单 编写nginx-test.yaml资源配置清单 创建资源对象 查看创建的pod资源 创建资源对象 网页访问一下 K8S中的port概述 创建yaml文件模板 查看生成yaml格式…
阅读更多...
【python的静态方法，classmethod方法和__call___魔法方法】

【python的静态方法，classmethod方法和__call___魔法方法】

classmethod魔法方法和staticmethodstaticmethod&#xff0c;静态方法classmethod&#xff0c;绑定类方法__call__&#xff0c;可调用类类方法staticmethod&#xff0c;静态方法 在python中&#xff0c;使用静态方法可以实现不需要实例化对象的绑定就可以直接调用的函数&#…
阅读更多...
Linux系统编程·进程概念

Linux系统编程·进程概念

你好&#xff0c;我是安然无虞。 文章目录自学网站上文回顾进程控制块—PCB查看进程初识系统调用初始fork函数练习题自学网站 推荐给老铁们两款学习网站&#xff1a; 面试利器&算法学习&#xff1a;牛客网 风趣幽默的学人工智能&#xff1a;人工智能学习 首个付费专栏&…
阅读更多...
添加滚动彩色提醒通知公告代码

添加滚动彩色提醒通知公告代码

分享一个动态的滚动多样化的彩色提醒通知公告&#xff0c;代码是自适应的&#xff0c;放在很多地方都可以用&#xff0c;在wordpress、emlog等建站cms中&#xff0c;都可以在自定义侧边栏中&#xff0c;用来网站、博客的美化也是非常不错的选择。 使用说明: wordpress&#xff…
阅读更多...
网络编程04-UDP的广播、组播

网络编程04-UDP的广播、组播

目录 一、UDP广播通信 1、什么是广播 2、特点 3、广播地址 4、实现广播的过程&#xff08;一定是使用UDP协议&#xff09; 广播发送端 广播接收方 练习1&#xff1a; 把广播通信进行实现 发送端 接收端 二、UDP组播&#xff08;群聊&#xff09; 1、概念 2、组播特…
阅读更多...
(最新版2022版）剑指offer之动态规划题解

(最新版2022版）剑指offer之动态规划题解

&#xff08;最新版2022版&#xff09;剑指offer之动态规划题解[剑指 Offer 42. 连续子数组的最大和][剑指 Offer 47. 礼物的最大价值][剑指 Offer 46. 把数字翻译成字符串][剑指 Offer 48. 最长不含重复字符的子字符][剑指 Offer 48. 矩形覆盖][剑指 Offer 买卖股票的最好时机…
阅读更多...
小侃设计模式（五）-建造者模式与模板方法模式

小侃设计模式（五）-建造者模式与模板方法模式

1.概述 建造者模式&#xff08;Builder Pattern&#xff09;又叫生成器模式&#xff0c;是一种对象构建模式&#xff0c;它可以将复杂对象的建造过程抽象出来&#xff08;抽象类别&#xff09;&#xff0c;这个抽象过程的不同实现方法可以构造出不同表现&#xff08;属性&…
阅读更多...
家庭主妇问题

家庭主妇问题

一 问题描述 X 村的人们住在美丽的小屋里。若两个小屋通过双向道路连接&#xff0c;则可以说这两个小屋直接相连。X 村非常特别&#xff0c;可以从任意小屋到达任意其他小屋&#xff0c;每两个小屋之间的路线都是唯一的。温迪的孩子喜欢去找其他孩子玩&#xff0c;然后打电话给…
阅读更多...
C++中TCP socket传输文件

C++中TCP socket传输文件

在两个文件中都定义文件头和用到的宏&#xff1a; #define MAX_SIZE 10 #define ONE_PAGE 4096 struct FileHead {char str[260];int size; }; 在客户端发送接收阶段&#xff1a; //1.发送文件头char path[260] {0};cout<<"请输入文件路径"<<endl;cin…
阅读更多...
数字图像处理MATLAB

数字图像处理MATLAB

数字图像处理MATLAB 基&#xff08;本&#xff09;操&#xff08;作&#xff09; 图片读取 Aimread(test.bmp); imshow(A);2. 图像写入 Aimread(test.bmp); imwrite(A,test-bak.bmp); Bimread(test-bak.bmp); imshow(B);3. 图像文件信息查询 infoimfinfo(test.bmp);4. 显示…
阅读更多...
【创建型】生成器模式(Builder)

【创建型】生成器模式(Builder)

目录生成器模式(Builder)适用场景生成器模式实例代码&#xff08;Java&#xff09;生成器模式(Builder) 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 适用场景 当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方…
阅读更多...
【SpringBoot笔记22】SpringBoot框架集成Redis数据库

【SpringBoot笔记22】SpringBoot框架集成Redis数据库

这篇文章&#xff0c;主要介绍SpringBoot框架如何集成Redis数据库。 目录 一、SpringBoot集成Redis 1.1、引入依赖 1.2、配置redis连接信息 1.3、添加RedisTemplate配置类 1.4、编写测试类 1.5、运行测试 一、SpringBoot集成Redis Redis是一个非关系型数据库&#xff0c…
阅读更多...
PCIe ECAM机制访问PCIE的配置空间

PCIe ECAM机制访问PCIE的配置空间

1.PCIe ECAM机制 PCI Express Enhanced Configuration Access Mechanism (ECAM)是访问PCIe配置空间的一种机制。是将PCIe的配置空间映射到MEM空间&#xff0c;使用MEM访问其配置空间的一种实现。可参考NCB-PCI_Express_Base_5.0r1.0-2019-05-22.pdf的第7.2.2小节。 其地址映射…
阅读更多...
上海亚商投顾：沪指录得6连阳 两市成交再度破万亿

上海亚商投顾：沪指录得6连阳 两市成交再度破万亿

上海亚商投顾前言&#xff1a;无惧大盘大跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 三大指数今日横盘震荡&#xff0c;收盘集体小幅上扬&#xff0c;日K线均录得6连阳。虚拟现实概念股集体拉升&#…
阅读更多...
【SA-Token】授权 鉴权中心微服务

【SA-Token】授权 鉴权中心微服务

授权 鉴权中心微服务 1 什么是JWT 1.2 JWT 的基本概念 1.3 JSON Web Token jwt 是一个开放标准 它定义了一种紧凑的、自包含的方式 用于作为JSON 对象在各方之间安全地传输信息 1.4.那些场景下可以考虑使用JWT &#xff1f; ​ 1.用户授权 信息交换 1.5 JWT的结构及其含义 …
阅读更多...
镜频抑制滤波器对射频接收前端输出噪声的影响

镜频抑制滤波器对射频接收前端输出噪声的影响

射频接收前端包括LNA、Filter、Mixer等部件&#xff0c;从噪声因子级联的角度讲&#xff0c;希望接收链路第一级为高增益、低噪声系数放大器&#xff0c;以期望得到较低的系统噪声系数&#xff0c;提高接收灵敏度。除LNA外&#xff0c;接收链路还有一个关键的部件——镜频抑制滤…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023