2017-3-23 less

Parent Selectors （父级选择器）

1、使用&引用父选择器
LESS:

.public {
  width: 100px;
  height: 100px;
  & > p {
    background-color: #000;
  }
  &:hover {
    background-color: #fff;
  }
  :hover {
    background-color: #f48;
  }
  &-btn {
    background-color: #f60;
  }
  &,&-b {
    background-color: #ccc;
  }
}

CSS:

.public {
  width: 100px;
  height: 100px;
}
.public > p {
  background-color: #000;
}
.public:hover {
  background-color: #fff;
}
.public :hover {
  background-color: #f48;
}
.public-btn {
  background-color: #f60;
}
.public,
.public-b {
  background-color: #ccc;
}

2、Changing selector order （改变选择器顺序）
LESS：

.header {
  .menu {
    border-radius: 5px;
    .abc & {
      background-image: url('images/button-background.png');
    }
    .efg & {
      background-image: url('images/button-background.png');
    }
  }
}

CSS:

.header .menu {
  border-radius: 5px;
}
.abc .header .menu {
  background-image: url('images/button-background.png');
}
.efg .header .menu {
  background-image: url('images/button-background.png');
}

3、&还可以用于生成一个逗号分割列表的所有可能的选择器排列
LESS:

.a, .b, .c, .d {
  border-top: 2px dotted #366;
  & + & {
    border-top: 1px solid #ccc;
  }
}

CSS:

.a,
.b,
.c,
.d {
  border-top: 2px dotted #366;
}
.a + .a,
.a + .b,
.a + .c,
.a + .d,
.b + .a,
.b + .b,
.b + .c,
.b + .d,
.c + .a,
.c + .b,
.c + .c,
.c + .d,
.d + .a,
.d + .b,
.d + .c,
.d + .d {
  border-top: 1px solid #ccc;
}

Merge （合并属性）

1、merge特性可以从多个属性中将值集合集合到一个单一属性之下的逗号或空格分割属性列表中。对于诸如background和transform之类的属性来说，merge非常有用。
LESS：

.mixin() {
  background+: url(../images/1.png) no-repeat;
}
.myclass {
  .mixin();
  background+:#000; 
}

CSS:

.myclass {
  background: url(../images/1.png) no-repeat, #000;
}

Loops （循环）

1、
LESS:

.generate-columns(5);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

CSS:

.column-1 {
  width: 20%;
}
.column-2 {
  width: 40%;
}
.column-3 {
  width: 60%;
}
.column-4 {
  width: 80%;
}
.column-5 {
  width: 100%;
}

Mixin Guards（带条件的Mixin）

1、
LESS：

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

CSS:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

2、Guard comparison operators （Guard中的比较运算符）
guards中可用的比较运算符的完整列表为： >, >=, =, =<, <。此外，关键字true是让两个mixins等价的唯一真值。

3、Guard logical operators （Guard逻辑运算符）
使用and关键字来组合guards

LESS:

@media: mobile;
@media: desktop;
.mixin (@a) when (@media = mobile) { 
  width: 100px;
  height: 100px;
}
.mixin (@a) when (@media = desktop) { 
  width: 200px;
  height: 200px;
}
.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }
.class1 { .mixin(100px) }
.class2 { .mixin(200px) }

CSS:

.class1 {
  width: 200px;
  height: 200px;
}
.class2 {
  width: 200px;
  height: 200px;
}

函数

color(string) 解析颜色,将代表颜色的字符串转换为颜色值
convert(value,unit) 将数字从一种单位转换到另一种单位.第一个参数为带单位的数值,第二个参数为单位.
ceil(number)向上取整
floor(number)向下取整
percentage(number)将浮点数转换为百分比字符串
round(number)四舍五入取整
sqrt(number)计算一个数的平方根,并原样保持单位
pow(number,number)设第一个参数为A,第二个参数为B,返回A的B次方.
mod(number,number)返回第一个参数对第二参数取余的结果.
min(value1, ..., valueN)返回一系列值中最小的那个.
max(value1, ..., valueN)返回一系列值中最大的那个.
abs(number)计算数字的绝对值,并原样保持单位
sin(number)正弦函数
cos(number)余弦函数
asin(number)反正弦函数.返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间.
acos(number)反余弦函数.区间在 0 到 PI之间.
tan(number)正切函数
atan(number)反正切函数
pi()返回圆周率 π (pi)
isnumber(value)如果待验证的值为数字则返回 true,否则返回 false
isstring(value)如果待验证的值是字符串则返回 true,否则返回 false
iscolor(value)如果待验证的值为颜色则返回 true,否则返回 false

练习
1、四角的半径
LESS:

.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
  -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
  -moz-border-radius: @topleft @topright @bottomright @bottomleft;
  border-radius: @topleft @topright @bottomright @bottomleft;
}
 
#somediv {
  .border-radius-custom(20px, 20px, 0px, 0px);
}

CSS:

#somediv {
  border-radius: 20px 20px 0px 0px;
}

2、方块阴影
LESS:

.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
 
#somediv {
  .box-shadow(5px, 5px, 6px, 0.3);
}

CSS:

#somediv {
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

3、 转换/旋转
LESS：

.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
  -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
  transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
#someDiv {
  .transform(5deg, 0.5, 1deg, 0px);
}

CSS:

#someDiv {
  -webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
}

4 、不同背景图
LESS：

@base-url: "../images ";  
@icon-image-url: "a.png";  
  
.icon (@index) {  
     background-image: url("@{base-url}/@{icon-image-url}");  
     background-position:  0px (0 - (10 * @index));  
}  
  
.icon (@_) {  
    width: 50px;  
    height: 50px;  
}  
 
#icon1 {  
    .icon (1);  
}  
  
#icon2 {  
    .icon (2);  
}  
  
#icon3 {  
    .icon (3);  
}  

CSS:

#icon1 {
  background-image: url("../images/images/a.png");
  background-position: 0px -10;
  width: 50px;
  height: 50px;
}
#icon2 {
  background-image: url("../images/images/a.png");
  background-position: 0px -20;
  width: 50px;
  height: 50px;
}
#icon3 {
  background-image: url("../images/images/a.png");
  background-position: 0px -30;
  width: 50px;
  height: 50px;
}