移动Web——less

1、less-简介

  • less是一个CSS预处理器,Less文件后缀是.less。扩充了CSS语言,使CSS具备一定的逻辑性、计算能力
  • 注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件
  • VS code插件:Easy LESS,保存less文件后自动生产对应的CSS文件

2、less体验

less文件

.father {color: red;width: (68 / 37.5rem);.son {height: (29 / 37.5rem);}
}

自动生成css文件

.father {color: red;width: 1.81333333rem;
}
.father .son {height: 0.77333333rem;
}

2.1 less-注释

注释:

  • 单行注释
    • 语法:// 注释内容
    • 快捷键:ctrl + /
    • 注意:单行注释没办法生成css
  • 快注释
    • 语法:/* 注释内容*/
    • 快捷键:shift + alt + A
// 单行注释/* 这是块注释允许换行
*/

 2.2 less-运算

运算:

  • 加、减、乘直接书写计算表达式
  • 除法需要添加 小括号 或 .

.box {width: 100 + 20px;width: 100 - 80px;width: 100 * 2px;// 除法 / → (计算表达式) 或 ./ → 推荐()width: (68 / 37.5rem);width: 29 ./ 37.5rem;// 如果表达式有多个单位,最终css里面以第一个单位为准height: (29px / 37.5rem);
}

 2.3 less-嵌套

作用:快速生成后代选择器

.father {color: red;.son {width: 200px;a {color: green;// & 表示的是当前选择器,代码写到谁的大括号里面就表示谁 → 不会生成后代选择器// 应用:配合hover伪类或nth-child结构伪类使用&:hover {color: blue;}}// a:hover {//   color: orange;// }}
}

2.4 less-变量

概念:容器,存储数据

作用:存储数据,方便使用和修改

语法:

  • 定义变量:@变量名:数据;
  • 使用变量:CSS属性:@变量名;

 

// 1. 定义变量
@myColor: green;// 2. 使用变量
div {color: @myColor;
}p {background-color: @myColor;
}a {color: @myColor;
}

2.5 less-导入

作用:导入less公共样式文件

语法:导入:@import "文件路径";

提示:如果是less文件可以省略后缀

@import "./08-less-体验.less";
@import "./09-less-注释";

2.6 less-导出

写法:在less文件的第一行添加 // out: 存储URL

提示:文件夹名称后面添加 /

// out: ./mycss/index.css// out: ./css/// out: ./index.css

2.7 less-禁止导出

写法:在less文件第一行添加:// out: false

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka系列(二)将消息数据写入Kafka系统--生产者【异步发送、同步发送、单线程发送、多线程发送、配置生产者属性、自定义序列化、自定义主题分区】

Kafka系列 发送消息到 Kafka 主题了解异步模式了解同步模式线程发送消息的步骤生产者用单线程发送消息生产者用多线程发送消息 配置生产者属性保存对象的各个属性一序列化序列化一个对象序列化对象的存储格式自己实现 序列化的步骤1. 创建序列化对象2. 编写序列化工具类3. 编写…

13.2 Web与Servlet进阶(❤❤)

13.2 Web与Servlet进阶 1. 请求与响应1.1 URL与URI1.2 HTTP请求的结构1. 结构2.后端获取访问工具类型:getHeader().toLowerCase方法1.3 响应的结构1. 结构2. 响应常见状态码3. 后端设置响应参数4. 响应的ContentType作用1.4 请求转发与响应重定向应用1. 请求转发:getRequestDis…

Mysql运维篇(四) MySQL常用命令

一路走来,所有遇到的人,帮助过我的、伤害过我的都是朋友,没有一个是敌人。如有侵权,请留言,我及时删除! 一、MySQL命令速查表 https://www.cnblogs.com/pyng/p/15560059.html Mysql DBA运维命令大全 - 墨…

【机器学习、深度学习和强化学习原理】

目录 机器学习、深度学习和强化学习都是人工智能的重要领域,它们的代码原理与实现有所不同。机器学习是一种通过训练模型来从数据中学习规律和模式的技术。其代码实现通常包括以下步骤:深度学习是一种模仿人脑神经网络的算法,通过多层神经网络…

批量注册与自动下单:探索速卖通跨境智能系统的操作方法

速卖通跨境智能系统是一款功能强大的软件,可以帮助用户批量注册速卖通买家号、绑定地址、加购加心愿单以及自动下单等任务。 该软件具有以下优势: 强大的指纹系统:采用最新的反指纹技术,可以设置与代理IP相对应的语言和时区&…

调试prplmesh指南

前提:安装ubuntu虚拟机 本文使用的linux发行版本:Ubuntu 20.04.6 LTS 1 安装依赖 安装相关依赖包 sudo apt-get update && sudo apt-get upgrade sudo apt-get install vim git unzip curl binutils cmake gcc bison curl flex gcovr binuti…

Java swing——创建对话框JDialog

之前我们讲了怎么建立一个简易的窗口,链接:http://t.csdnimg.cn/l7QSs,接下来继续讲解窗口的进阶。 对话框 上一篇文章中我们讲到了JFrame是一种顶层容器,本文接下来介绍其余的顶层容器。 跟JFrame一样,,这…

C/C++ 回调函数 callback 异步编程

一、C语言的回调函数 1.小试牛刀 #include <iostream> using namespace std; #include <memory> #include <stdlib.h>int add(int a, int b) {return a b; }void test01() {// 函数指针可以指向任何类型的函数&#xff0c;只要函数的参数列表和返回值类型…

如何结合ChatGPT生成个人魔法咒语词库

3.6.1 ChatGPT辅助力AI绘画 3.6.1.1 给定主题让ChatGPT直接描述 上面给了一个简易主题演示一下&#xff0c;这是完全我没有细化的提问&#xff0c;然后把直接把这些关键词组合在一起。 关键词&#xff1a; 黄山的美景&#xff0c;生机勃勃&#xff0c;湛蓝天空&#xff0c;青…

厕所革命与可持续发展的“九牧方案”

人类文明的历史&#xff0c;就是厕所的革命史&#xff0c;小小的厕所里&#xff0c;承载着大故事。 2015 年&#xff0c;印度一个名叫娜尔的女孩&#xff0c;因为丈夫不愿意在家盖厕所&#xff0c;向法庭提出了离婚申请&#xff0c;由此引发了全印度“无厕所&#xff0c;无新娘…

从零开始 TensorRT(2)Python 篇:原生 API 构建网络

前言 学习资料&#xff1a; TensorRT 源码示例 官方文档&#xff1a;Working With TensorRT Using The Python API 官方文档&#xff1a;TensorRT Python API 官方文档&#xff1a;CUDA Python B站视频&#xff1a;TensorRT 教程 | 基于 8.6.1 版本 B站视频配套代码 cookbook …

OSG帧渲染,如何实现自定义动画效果

看到这个标题,老司机可能会想到OSG动画相关的内容,比如osg::AnimationPath类和osg::AnimationPathCallback类,这些动画类,可以实现按照一定的插值方式,生成路径,物体对象按照生成的路径或者预先指定的路径来完成相应的动作的动画。 路径动画有三种动画模式,分别为单摆环…

幻兽帕鲁服务器游戏版本怎么升级更新?

哈喽大家好&#xff0c;我是咕噜美乐蒂&#xff0c;很高兴又见面啦&#xff01; 幻兽帕鲁&#xff08;Monster Hunter: World&#xff09;是一款热门的多人在线游戏&#xff0c;玩家可以在服务器上与其他玩家一起探险、狩猎怪物。为了保持游戏的平衡性和提供更好的游戏体验&am…

【百度Apollo】探索创新之路:深入了解Apollo开放平台

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下…

docker部署RedisCluster集群简单介绍

本文介绍自己建立一个redis-cluster集群的实践&#xff0c;三主三从&#xff0c;使用docker搭建。 其实搭建很简单&#xff0c;就是建立6个容器&#xff0c;每个容器配置不同的端口号&#xff0c;其他的都是一样的。 假设建立6个端口号分别为 5555到5560。 配置文件 port 5…

redis相关问题

面试官&#xff1a;什么是缓存穿透 ? 怎么解决 ? 候选人&#xff1a; 嗯~~&#xff0c;我想一下 缓存穿透是指查询一个一定不存在的数据&#xff0c;如果从存储层查不到数据则不写入缓存&#xff0c;这将导致这个不存在的数据每次请求都要到 DB 去查询&#xff0c;可能导致 D…

树莓派突然不能ssh远程连接的踩坑记录及解决方案

在家研究树莓派&#xff0c;远程连接树莓派吃了不少苦&#xff0c;总是一些意想不到的问题出现&#xff0c;明明昨天还能远程连接&#xff0c;今天又不能了。经过一系列排查&#xff0c;终于锁定&#xff1a; 因为我之前设置的树莓派的静态ip地址&#xff0c;但是可能因为是家…

ai创作软件有哪些?这5个软件了解一下

ai创作软件有哪些&#xff1f;随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;在各个领域都展现出了惊人的实力。特别是在内容创作领域&#xff0c;AI技术已经成为了助力创作者们提高效率、释放创意的得力助手。今天&#xff0c;我们将为大家介绍五款AI创作…

开源模型应用落地-业务优化篇(四)

一、前言 经过线程池优化、请求排队和服务实例水平扩容等措施,整个AI服务链路的性能得到了显著地提升。但是,作为追求卓越的大家,绝不会止步于此。我们的目标是在降低成本和提高效率方面不断努力,追求最佳结果。如果你们在实施AI项目方面有经验,那一定会对GPU服务器的高昂…

软件工程(最简式总结)

目录 第一章:概述 1.软件危机的表现原因 2.常见的软件开发方法包括&#xff1a; 3.软件工程基本原则 4.软件工程三要素 5.设计模式的分类 6.针对变换型数据流设计步骤 7.针对事务型数据流设计步骤 第二章&#xff1a;软件过程 1.软件生命周期 2.软件过程模型 &…