less学习手册记录

变量（Variables）

@width:10px;
@height:@width+10px;

#header {
	width:@width,
	height:@height
}

混入（Mixins）

.bordered {
	border-top:dotted 1px black;
	border-bottom:solid 2px black;
}
#id{
	width:100px
}

#menu a {
	color:#111;
	.bordered();
	#id();
}

嵌套（Nesting）

#header {
	color:black;
	.navigation {
		font-size:12px;
	}
	.logo {
		width:300px
	}
	&:after { //&表示当前选择器的父级
		content:" ";
		dispaly:block;
		font-size:0;
		height:0;
		clear:both;
		visibility:hidden;
	}
}

@规则嵌套和冒泡

.component {
	width:300px;
	@media (min-width:768px) {
		width:600px;
		@media (min-resolution:192dpi) {
			background-image:url(/img/retina2x.png);
		}
	}
	@media (min-width:1280px) {
		width:800px;
	}
}

运算

//运算符有+、-、*、/
//所有操作数被转换成相同的单位，计算的结果以最左侧操作数的单位类型为准。
//如果单位换算无效或失去意义,忽略单位
//无效的单位换算例如：px到cm或rad到%的转换
@coversion-1:5cm+10mm;//结果是6cm
@conversion-2:2-3cm-5mm;//结果是-1.5cm

@incompatible-units:2+5px-3cm; //结果是4px

@base:5%;
@filler:@base*2;//结果是10%
@other:@base+@filler;//结果是15%

//乘法和除法不作转换。将按数字的原样进行操作，并将为计算结果指定明确的单位类型
@base:2cm*3mm;//结果为6cm
@color:#224488/2;//结构为#112244

calc()特例

//calc()并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值
@var:50vh/2;
width:calc(50%+(@val-20px));//结果为calc(50%+(25vh-20px));

转义 (Escaping)

//任何~"anything"和~'anything'形式的内容都将按原样输出，除非interpolation
@min768:~'(min-width:768px)';
.element {
	@media @min768 {
		font-size:1.2rem
	}
}
//在Less3.5+版本中，许多以前需要“引号转义”的情况就不再需要了，可以简写为：
@min768:(min-width:768px);
.element {
	@media @min768 {
		font-size: 1.2rem;
	}
}

函数

逻辑函数

if

@some:foo;
div {
	margin:if((2>1),0,3px);
	color: if((iscolor(@some)),@some,black);
}
//在Less3.6+,可以省略括号
div {
	color:if(2>1,blue,green);
}

boolean

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

String Function

escape(转义字符串)

escape('a=1');
//输出
a%3D1

e

//将字符串作为参数并按原样返回其内容，并且不带引号
@mscode:'ms:alwaysHasItsOwnSyntax.For.Stuff()';
filter:e(@mscode);
输出：
fileter:ms:alwaysHasItsOwnSyntax.For.Stuff();

%

/*
*函数%(string,arguments...)格式化字符串
*第一个参数是带有占位符的字符串。 所有占位符均以百分比符号％开头，
*后跟字母s，S，d，D，a或A。其余参数包含用于替换占位符的表达式。 
*如果您需要打印百分比符号，请再加上一个百分比%%。

*如果需要将特殊字符转义为utf-8转义码，请使用大写占位符。
*该函数转义除（）'〜！之外的所有特殊字符。 空格编码为％20。 
*小写的占位符保留原样的特殊字符。

*占位符：
*d，D，a，A-可以用任何种类的参数（颜色，数字，转义值，表达式等）代替。
*如果将它们与字符串结合使用，则将*使用整个字符串-包括其引号。 
*但是，引号按原样放置在字符串中，不能用“ /”或类似符号进行转义。
*s，S-可以用任何表达式代替。 如果将它与字符串一起使用，则仅使用字符串值-省略引号。
*/

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

输出：
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

replace

/*
*参数：
*string：要搜索和替换的字符串
*pattern:要搜索的字符串或正则表达式模式
*replace：用来替换匹配模式的字符串
*flags: (可选) 正则表达式标志
*/
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');

输出
"Hello,Earth!";
"2+2=4";
"This is a new string.";
bar-2;

List Functions

length

//返回值列表中元素的数量。参数列表—以逗号或空格分隔的值列表。
@list:'banana','tomato','patato','peach';
n:length(@list);

输出:
n:4;

extract

//返回列表中指定位置的值。参数列表—以逗号或空格分隔的值列表。index—指定列表元素返回位置的整数。
@list:apple,pear,coconut,orange;
value:extract(@list,3);

输出:
value:coconut;

range

//生成列表，参数start-(可选)起始值，end-结束值，step-增量的数量
value:range(10px,30px,10);
输出:
value:10px 20px 30px;

each

@selectors:blue,green,red;
each(@selectors,{
	.sel-@{value} {
		a:b;
	}
})

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

//在Less3.7+可以这样使用
.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

Math Functions

ceil

//向上舍入到下一个最大整数
ceil(2.4) => 3

floor

//向下舍入到下一个最小整数
floor(2.6) => 2

percentage

//将浮点数转换为百分数字符串
percentage(0.5) => 50%

round

//四舍五入,参数：number(浮点数),decimalPlaces(要保留的小数位，默认为0)
rand(1.67)=>2
rand(1.67,1)=>1.7

sqrt

//取平方根
sqrt(25cm)=>5cm
sqrt(18.6%)=>4.312771730569565%

abs

//取绝对值
abs(-18.6%)=>18.6%

sin

//计算正弦函数。假定数字的弧度不带单位。
sin(1)=>0.8414709848078965

asin

//计算反正弦函数,返回以弧度为单位的数字
asin(0) => 0rad

cos

//计算余弦函数。在没有单位的数字上假定弧度。参数：数字（一个浮点数）;返回：数量
cos(1) => 0.5403023058681398

acos

//计算反余弦函数。返回以弧度表示的数字。参数：数字（一个从[-1,1]之间的浮点数）;返回：数量
acos(0.5403023058681398) => 1red

tan

//计算切线函数，参数:数字（浮点数）,返回：数字
tan(1)=>1.5574077246549023

atan

//计算反正切（正切的倒数）函数;返回以弧度为单位的数字;参数：数字（浮点数）
atan(0) => 0rad

pi

//返回π
pi()=>3.141592653589793

pow

//求幂操作，返回值的单位与第一个参数的单位相同，而第二个参数的单位将被忽略
pow(25,0.5)=>5

mod

//返回第一个参数对第二个参数取余的结果，返回值的单位与第一个参数的单位相同，而第二个参数的单位将被忽略
mod(11cm,6px)=>5cm

min

//返回多个值中的最小值
min(3px,42px,1px,16px) => 1px

max

//返回多个值中的最大值
max(3%,42%,1%,16%)=>42%

类型函数

isnumber

//判断值是否是数字，注意百分比也算数字
isnumber(#ff0)=>false
isnumber(7.8%)=>true

isstring

//判断值是否是字符串
isstring('string') => true

iscolor

//判断值是否是颜色值
iscolor(#ff0) => true
iscolor(blue) => true

iskeyword

//判断是否是关键字
iskeyword(keyword) => true

isurl

//判断是否是url
isurl(url(...)) => true

ispixel

//判断值是否是以像素为单位的数字
ispixel(56px) => true

isem

//判断值是否是以em为单位
isem(7.8em) => true

ispercentage

//判断值是否是百分比
ispercentage(7.8%) => true

isunit

//判断值中是否包含指定单位的数字
isunit(11px,px) => true

isruleset

//判断值是否是规则集
@rules: {color:red}
isruleset(@rules) => true

Misc Functions

color

//将颜色字符串解析为颜色
color('#aaa') => #aaa

image-size

//获取文件中图像尺寸
image-size('file.png') => 10px 10px

image-width

//获取文件中图像的宽度
image-width('file.png') => 10px

image-height

//获取文件中图像的高度
image-height('file.png') => 10px

convert

//将数字从一个单位转换成另一个单位，如果单位不兼容，则返回未修改的第一个参数
convert(9s,'ms') =>9400ms

data-uri

//内联资源，参数:mimetype(可选，MIME类型字符串)，url:要内联的文件URL
data-uri('../data/image.jpg')=>url('../data/image.jpg')

default

//仅在警戒条件内可用，并且仅在没有其他混合匹配时返回true，否则返回false
//仅在保护表达式内部，默认函数可以作为Less内置函数使用。
// 如果在mixin保护条件之外使用，它将被解释为常规CSS值：
.mixin(1) {x:11}
.mixin(@x) when(default()) {z:@x}
div {.mixin(3)} => div {z:3}

unit

//删除或更改尺寸单位
unit(5,px) => 5px
unit(5em) => 5

get-unit

//返回数字的单位
//如何参数包含带单位的数字，则返回其单位。不带单位的参数将导致返回一个空值
get-unit(5px) => px
get-unit(5) => nothing

svg-gradient

//svg梯度函数生成多级svg梯度。至少具有三个参数。指定渐变类型和方向、颜色、位置。
//第一种和最后一种指定颜色的位置是可选的，其余颜色必须具有指定的位置
div {
	background-image:svg-gradient(to right,red,green 30%,bule)
}

命名空间和访问符

#bundle() {
	.button {
	    display: block;
	    border: 1px solid black;
	    background-color: grey;
	    &:hover {
	      background-color: white;
	    } 
    }
  .tab { ... }
  .citation { ... }
}
#head a {
	color:orange;
	#bundle.button(); //还可以书写为#bundle > .button 形式
}

映射

#colors(){
	primary:blue,
	secondary:green
}
.button {
	color:#colors[primary],
	border:1px solid #colors[secondary]
}

作用域

//less中作用域和CSS中作用域类似，先在本地查找变量和混合（mixins），如果找不到，则从‘父’级作用域继承
@var:red;
#page {
	#header {
		color:#val; //white
	}
	@val:white;
}

注释

/*块注释*/
//行注释

导入

//使用import导入，如果导入的文件是.less扩展名，则可以将扩展名省略掉
@import 'library';//library.less
@import 'typo.css';