当前位置: 首页 > news >正文

less 笔记

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

变量(Variables)

原生已支持 --前缀定义属性 var() 函数获取变量值
原生缺点 不能直接外部定义全局变量

@ 前缀定义变量
使用是 直接用变量名

变量可直接参与算术运算

混合(Mixins)

原生只能通过类的方式来组合样式规则,
对于常用组合,要么复制样式创建一个类,要么对应添加类名的组合

将一组属性从一个规则集包含(或混入)到另一个规则集的方法

使用 类选择器() or id选择器() 方式 混入到新的规则集,避免重复书写

* {#idName();.className();
}

嵌套(Nesting)

原生已完全支持
原生缺点 直接标签的嵌套 需要加 & 前缀 才能生效

@规则嵌套和冒泡

@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。

避免了在规则内部 重新书写选择器的麻烦

运算(Operations)

原生已部分支持 calc 函数 使用任意 <length>

算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义,则忽略单位。
还可以对颜色进行算术运算 需要加括号
(#224488 / 2)

转义(Escaping)

允许你使用任意字符串作为属性或变量值

~"str"

在 Less 3.5+ 版本中,许多以前需要“引号转义”的情况就不再需要了。

函数(Functions)

逻辑函数、转换颜色、处理字符串、算术运算等

each 函数

遍历 list 并生成规则
@value, @key, and @index
在选择器和属性名中的写法 @{value}, @{key}, and @{index}

range 函数

生成 数字 list

函数手册

命名空间和访问符

#空间名() {
}

可以指定命名空间下的类或id进行混入,避免命名冲突

#空间名.button();

映射(Maps)

从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。

#colors() {primary: blue;secondary: green;
}
color: #colors[primary];

可以理解为创建了枚举变量

作用域(Scope)

首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。

注释(Comments)

支持 js 的 // 行注释

导入(Importing)

可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名,则可以将扩展名省略掉

@import "library";
http://www.lryc.cn/news/250137.html

相关文章:

  • Java中的异常你了解多少?
  • 查找算法及哈希表
  • ELK分布式日志管理平台部署
  • 四、虚拟机网络配置
  • 四、Lua循环
  • 生成对抗网络(GAN)手写数字生成
  • LeetCode Hot100 31.下一个排列
  • Redis主从与哨兵架构详解
  • Linux:docker的数据管理(6)
  • 深入理解Zookeeper系列-1.初识Zoookeeper
  • 芯片技术探索:了解构芯片的设计与制造之旅
  • STM32 超声波模块(HC-SR04)
  • ELK+Filebeat
  • MySql之锁表、锁行解决方案
  • 2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项竞赛正式试题
  • JAVA 整合 AWS S3(Amazon Simple Storage Service)文件上传,分片上传,删除,下载
  • 记录:Unity脚本的编写9.0
  • 共享单车停放(简单的struct结构运用)
  • 【Java8系列07】Java8日期处理
  • 为什么做CSGO搬砖的不直接去炒股呢?
  • 12月01日,每日信息差//阿里国际发布3款AI设计生态工具//美团买菜升级为“小象超市”//外国人永居证换新、6国游客免签来华
  • ChatGPT探索:提示工程详解—程序员效率提升必备技能【文末送书】
  • Pytest做性能测试?
  • Swagger各版本访问地址
  • docker-compose;私有镜像仓库harbor搭建;镜像推送到私有仓库harbor
  • OpenTSDB(CVE-202035476)漏洞复现及利用
  • Maven无法拉取依赖/构建失败操作步骤(基本都能解决)
  • 【数据库】数据库并发控制的目标,可串行化序列的分析,并发控制调度器模型
  • 带头结点的双向循环链表
  • 2023年11月下旬大模型新动向集锦