CSS预处理器-less语法

基础

• css 的预处理语言
• css 的增强版
• 新特性：对变量的支持、对 mixin 的支持等
• 语法大体上和 css 一致，但是增添了许多对 css 的扩展
• less 转 css 才能在浏览器上执行
• 单行注释的内容不会被解析到 css 中
• &：表示外层的父元素
• :extend(): 对当前选择器扩展指定选择器的样式（选择器分组）
• mixin 混合: 在『类选择器后边添加()，实际上就创建了一个mixins』
• @import：用来引入到其它 less 文件到当前 less 文件

  @import "syntax2.less";

• 『所有的数值都可以直接进行运算』

  width: 100px + 100px;

变量

• 定义：

  $变量名：xxx;

• 使用：

  $变量名

  • 作为类名，或者一部分值使用时必须以

    ${变量名}

  • 示例：

    .${c}{ background-image: url("${c}/1.png");}

• 发生『重名时，会优先使用近的』
• 『声明前可以使用』
• 旧版语法：@变量名

混合函数 相当于形参实参混合

• 在混合函数中可以直接设置变量
• 调用混合函数，按顺序传递参数
• 示例：

  .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
  • 以可变比例将颜色与黑色混合