Less学习笔记

简介

LESS包含了一套自定义的语法及一个解析器，用户可以通过解析器，编译生成对应的css文件，它完全兼容css语法，再其基础上加入了程序化语言的特性。比如引入变量，Mixin(混入)；降低了css的维护的成本。

LESS语言特性

导入

myfile.less

.myfile{ color： color: #5882fA;}

myfile2.less

@import "myfile.less"
.myfile2{ color: #ff0000; }

可以使用以下命令将 style.less 文件编译为 style.css :

lessc myfile2.less myfile2.css

myfile2.css

.myfile{ color： color: #5882fA;}
.myfile2{ color: #ff0000; }

变量

LESS允许开发者自定义变量，可以是全局也可以是局部变量，局部变量优先级高于全局变量（是情况而定）
less文件

@var: @a;
@a: 15px;
.myclass {
  font-size: @var;   /*注释，最好使用段落注释符，双斜杠在css中不展示*/
  @a:20px;
  color: green;
  }
}

得到css文件：

.myclass {
  font-size: 20px;
  color: green;
}

混合

style.less文件：

.p1{color: red;}
.p2{background: #64d9c0;
    .p1();
   }

style.less转换成style.css文件：

.p1{color: red;}
.p2{background: #64d9c0;
    color:red;
   }

Extend(继承)

Extend是Less的伪类，他将所放置它的选择器与匹配引用的选择器进行合并

.a { color: red;}
.text {
	background-color: #c3c3c3;
	&:extend(.a);
	font-size: 12px;
}

转换为css文件如下：

.a, .text {
  color: red;
}
.text {
  background-color: #0d94f3;
  font-size: 12px;
}

less Mixin Guards

可以在表达式上匹配简单的值或者参数数量，可以通过使用Guards。有很多类型检查函数，下面会一一列举；

style.less

.mixin (@a) when (lightness(@a) >= 50%){
	font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%){
	font-size: 16px;
}
.mixin (@a){
	color: @a;
}
.class1{.mixin(#FF0000)}

对应的css文件

.class1 {
  font-size: 14px;
  color: #FF0000;
}

less类型检查函数
iscolor/isnumber/isstring/iskeyword/isurl/ 举例如下：
style.less

.mixin (@a; @b:red) when (iscolor(@b)){
	color: blue;
}
.mixin (@a){
	font-size: @a;
}
.myclass { .mixin(20px)}

style.css

.myclass {
  color: blue;
  font-size: 20px;
}

循环

Loops语句允许我们多次执行一个语句或者多个语句，当递归mixin与Guard表达式和模式匹配组合时，可以创建各种迭代/循环结构。\

style.less文件

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

style.css文件：

div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}

合并

允许使用单个属性从多个属性中为逗号或空格分隔列表添加值，它可以用于背景和交换属性。分为合并逗号和合并空间。

1. 合并逗号 : 它添加属性到最后。
   style.less

.myfunc() { box-shadow+: 5px 5px 5px grey;}
.class { 
	.myfunc();
	box-shadow+:0 0 5px #f78181;
}

style.css

.class {
  box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
}

2. 合并空间：它添加了属性值和空格。

style.less文件

.mixin() { transform+_: scale(1);}
.class {
	.mixin();
	tramsform+_: rotate(2deg);
}

style.css文件：

.class {
  transform: scale(1) rotate(2deg);
}

函数

函数	描述	示例
color()	代表一个颜色的字符串	color:(#fe2700)
image-size	从文件检查图像的维度	image-size:image-size(“startup.jpg”);
image-width	检查文件中图像的宽度
image-height	检查文件中图像的高度
convert	数字从一个单位转换为另一个单位	no-unit:convert(5, mm);

数学函数

函数	描述	例子
ceil	数字向上舍入为最大整数	ceil(0.7)舍入为1
floor	向下去整	floor(3.3) 它将数字舍入后为：3
percentage	浮点数转换为百分比字符串	percentage(0.2)转换后：20%
round	舍入浮点数	round(3.77)转换后4
abs	绝对值