当前位置： 首页 > article >正文

【CSS】less基础（简单版）

article 2025/2/27 19:50:06

less基础（简单版）

  • 01.CSS的弊端
  • 02.LESS简介以及使用变量
  • 03.less编译easy less插件
  • 04.less嵌套
  • 05.less运算

01.CSS的弊端

在这里插入图片描述

如下图：
在这里插入图片描述
在这里插入图片描述
要手动计算倍数。

02.LESS简介以及使用变量

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

03.less编译easy less插件

在这里插入图片描述
在这里插入图片描述

安装easy less之后，保存less文件时会自动生成一个css文件。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

04.less嵌套

CSS嵌套写法：
在这里插入图片描述

在less内：
在这里插入图片描述
在css内（less文件保存后生成的css文件）：
在这里插入图片描述

所以，（后代选择器如此写）
在这里插入图片描述

如果是两个类呢？
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

如果是伪类，如下写是不对的
在这里插入图片描述
在这里插入图片描述

应该如下写：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

所以，在这里插入图片描述
在这里插入图片描述

05.less运算

在这里插入图片描述

例如：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用运算后：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运算也可以应用于改颜色：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

还可以加括号：
在这里插入图片描述

官网：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述


http://www.kler.cn/a/563555.html

相关文章：

  • vue3动态引入图片
  • 【HeadFirst系列之HeadFirst设计模式】第13天之代理模式：控制对象访问的利器！
  • 【二分查找 图论】P8794 [蓝桥杯 2022 国 A] 环境治理|普及
  • Jmeter的自动化测试实施方案
  • 驭势科技9周年：怀揣理想，踏浪前行
  • 深入浅出深度学习中的BatchSize
  • 【10】RUST的迭代器与闭包
  • 【docker】namespace底层机制
  • 在线会议时, 笔记本电脑的麦克风收音效果差是为什么
  • C/C++ | 每日一练 (4)
  • APNG格式图片文件大小优化方案 转WEBP
  • seacmsv9报错注入管理员账号密码，order by 注入，如何解决 information_schema关键字被过滤掉了
  • ElasticSearch核心技术解析：倒排索引与IK分词器如何解决中文搜索痛点
  • MySQL四种备份表的方式
  • 阿里云可观测全面拥抱 OpenTelemetry 社区
  • Android JNI开发指南
  • 【京准时钟】网络时间同步服务器对数据库的重要性
  • PYQT学习笔记-从简单窗口到多功能主窗口的实现
  • vllm的使用方式，入门教程
  • C#异步编程之async与await