CSS预处理器-less语法

基础

• css 的预处理语言
• css 的增强版
• 新特性：对变量的支持、对 mixin 的支持等
• 语法大体上和 css 一致，但是增添了许多对 css 的扩展
• less 转 css 才能在浏览器上执行
• 单行注释的内容不会被解析到 css 中
• @import：用来引入到其它 less 文件到当前 less 文件
  • 示例：@import “syntax2.less”;
• 所有的数值都可以直接进行运算
  • 示例：width: 100px + 100px;
• 变量
  • 定义：$变量名：xxx;
  • 使用：$变量名
    • 作为类名，或者一部分值使用时必须以 ${变量名}
    • 示例：.${c}{ background-image: url("${c}/1.png");}
  • 发生重名时，会优先使用近的
  • 声明前可以使用
  • 旧版语法： @变量名
• &：表示外层的父元素
• :extend(): 对当前选择器扩展指定选择器的样式（选择器分组）
• mixin 混合
  • 在类选择器后边添加()，实际上就创建了一个mixins
• 混合函数 相当于形参实参混合
  • 在混合函数中可以直接设置变量
  • 调用混合函数，按顺序传递参数
  • 示例：

    .test(@w:100px,@h:200px,@bg-color:red){
    	width: @w;
    	height: @h;
    	border: 1px solid @bg-color;
    }
    div{
      .test(200px,300px,#bfa); // 调用
    	.test(300px);
    }

函数工具

逻辑函数

• if — 根据条件返回两个值之一

  • 相关布尔表达式：
    • and === &&
    • or === ||
    • not === !
  • 参数
    • condition：布尔表达式, less3.6 之前要加()
    • value1：为 true，返回
    • value2：为 false，返回
  • 示例：

    @some: foo
    div {
    	margin: if((2>1), 0,3px) // 假设为真，0
    	color: if((iscolor(@some)), @some,black) // 假设为假， black
    }

• boolean — 计算结果为 true 或 false, 一般与 if 搭配使用

  • 参数：
    • condition — 布尔表达式
  • 示例

    @bg: black
    @bg-light: boolean(luma(@bg) > 50%)
    div {
    	background: @bg;
    	color: if(@bg-light, black, white)
    }

字符串函数

• escape — 将 URL 编码应用于在输入字符串中找到的特殊字符

  • 最常见的编码字符：\<space\>、#、^、( 、)、{ 、}、|、:、>、<、;、[、]、=
  • 未编码的字符：,、/、?、@、&、+、'、~、!、$
  • 参数：要转义的字符串
  • 返回：不带引号的转义内容
  • 示例: escape('a=1') // a%3D1, 将 = 转义为 URL 编码,非字符串输出 undefined

• e — 字符串转义

  • 参数：要转义的字符串
  • 返回：不带引号的转义的字符串
  • 示例：

    @mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()"
    filter: e(@mscode);
    输出： ms:alwaysHasItsOwnSyntax.For.Stuff()

• % — 设置字符串格式

  • 参数：
    • 带有占位符的字符串
    • 用于替换占位符的值
  • 返回值：格式化的字符串
  • 占位值：%s、 %S、 %d、 %D、 %a、%A、 %%
    • d, D, a, A — 可以替换为任何类型的参数，与字符串结合，则将使用整个字符串包括其引号，不会转义
    • s, S — 可以替换为任何表达式，与字符串结合，则使用字符串值，省略引号
    • 注：小写占位符保留特殊字符，大写会转义特殊字符，除()'~!空格编码为%20

• replace — 替换字符串中的文本

  • 参数：
    • string：要搜索和替换的字符串
    • pattern： 要搜索的字符串或正则表达式模式
    • replacement：要用来替换匹配模式的字符串
    • flags：（可选）正则表达式标志
  • 返回： 带有替换值的字符串
  • 示例：

    replace('Hello, Mars?', 'Mars?', 'Earth!') // Hello, Earth!
    replace('One + one = 4', 'one', '2', 'gi') // 全局匹配忽略大小写，2 + 2 = 4
    replace('This is a string.', '(string).$', 'new $1.') // 匹配在第一个匹配模式的字符串前添加new 'This is a new string.';
    replace(~'bar-1', '1', '2') // bar-2

列表函数

• length — 返回列表的长度
  • 参数： list：逗号或空格分割的值列表
• extract — 返回列表中指定位置的值
  • 参数：
    • list：逗号或空格分割的值列表
    • index：number，指定要返回的列表元素的位置，从 1 开始数
• range 生成一系列值的列表
  • 参数：
    • start：可选，起始值，默认 1
    • end：结束值
    • step：可选，要递增的间隔
• each — 将列表中的元素绑定给规则及中的每一项
  • 参数：
    • list：逗号或空格分割的值列表
    • rules：匿名规则集/混合
  • 示例：

    @list: apple, pear, conconut, orange
    @selectors: blue,green,red;如果是结构化的对象还有@{key},@{index}
    n: length(@list) // 4
    length(1px solid pink) // 3
    value: extract(@list, 3) // cocunt
    value1：range(4) // value1: 1,2,3,4
    each(@selectors,{
    	.sel-@{value} {
    		a:b;
    	}
    })
    
    # 在each()中设置变量名称
    .set-2() {
    	one:blue
    	two:green
    	three:red
    }
    .set-2 {
    	each(.set-2(), .(@v,@k,@i){
    		@{k}-@{i}:@v // each将.set-2()里面的值按顺序赋值绑定给@v,@k,@i
    	})
    }
    
    # 将each与range结合使用创建循环
    each(range(4), {
    	.col-@{value} {
    		height: (@value * 50px)
    	}
    })

数学函数

• ceil — 向上取整
• floor — 向下取整
• percentage — 将浮点数转换为百分比字符串
• round — 四舍五入
  • 参数：
    • number：浮点数
    • decimalPlaces：可选，要舍入到的小数位数，默认值 0
  • 返回：number
  • 示例：round(1.67,1) // 1.7
• sqrt — 计算数字平方根，单位不变
• abs — 计算数值的绝对值，单位不变
• pi — 返回 Π
• pow — 返回参数的幂，幂为第二参数
• min — 返回一个或多个值中的最小值
• max — 返回一个或多个值中的最大值

类型函数

• isnumber — 判断数值是否为数字，返回 true or false
• isstring — 判断数值是否为字符串，返回 true or false
• iscolor — 判断数值是否为颜色值，返回 true or false
• iskeyword — 判断值是否为 keyword，返回 true or false
• isurl — 判断值是否为 url()，返回 true or false
• isunit — 判断值是否为指定单位的数字，返回 true or false
  • 参数：
    • value：要评估的值
    • unit：要测试的单位标识符（可选）
  • 示例：isunit(7.8%, px) // false

杂项函数

• image-size — 从文件中获取图像大小,目前仅在节点环境中可用。
  • 示例： image-size(“file.png”) // 10px 10px
• image-width — 从文件中获取图像宽度,目前仅在节点环境中可用。
• image-height — 从文件中获取图像高度,目前仅在节点环境中可用。
• convert — 转换单位,只转换兼容的单位，单位不兼容返回第一个参数
  • 参数：
    • 带单位的数字
    • 单位
  • 示例：convert(9s,’ms’) // 9000
  • 兼容的设备组：
    • 长度：m、cm、mm、in、pt、pc
    • 时间：s、ms
    • 角度：rad、deg、grad、turn

色彩操作功能

• fadein — 降低颜色的透明度（或增加不透明度），使其更加不透明
• fadeout — 增加颜色的透明度（或降低不透明度），使其不那么不透明。
  • 参数：
    • color：颜色对象
    • amount：百分比 0-100%
    • method：可选，设置为 relative 来调整相对于当前值
• mix — 将不同比例的颜色混合在一起
  • 参数
    • color1：颜色对象
    • color2：颜色对象
    • weight：可选，两种颜色之间的百分比平衡点，默认为 50%
• shade — 以可变比例将颜色与黑色混合