Less学习--逻辑运算、属性规则集

逻辑运算

// 算术运算符±*/会在计算之前考虑单位并转换
@base:5%;
@couversion-1:5cm+10mm;

属性规则集

可以自己定义一个CSS属性集

@detached-ruleset:{
	background:red;
	width: 100px;
	height: 200px;
};

.top_list_goup{
	@detached-ruleset();
	//调用时必须加上()
}

可以在属性规则集中采用@media冒泡

@my-ruleset: {
    .my-selector {
      @media tv {
        background-color: black;
      }
    }
  };
@media (orientation:portrait) {
    @my-ruleset();
}

也可以通过以下方法抽取出在@media中包装一段代码

.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200) { 
  	@rules(); 
  }
  html.lt-ie9 & {
   @rules(); 
}
}

header {
  background-color: blue;

  .desktop-and-old-ie({
    background-color: red;
  });
}

注意：属性规则集的调用与mixin的调用采用相同的方式，
将其所有mixin返回到调用者中,但是，它不返回变量

@detached-ruleset: {
	@heightValue:90px; 
    .mixin() {
        color:blue;
        line-height: @heightValue;
    }
};

.caller {
    @detached-ruleset(); 
    
    .mixin();
}

在每一个属性集中的变量都是私有的,不能在别的非引用属性集中使用

声明范围是定义独立规则集主体的范围

将分离的规则集从一个变量复制到另一个变量无法修改其范围。仅在其中引用该规则集就无法访问新作用域

@detached-ruleset: {
   caller-variable: @caller-variable; 
   .caller-mixin(); 
	//在这个属性集里.caller-mixin、caller-variable都是未定义的
};

selector {
  @detached-ruleset(); 
  //不能向上查找信息
  // caller-variable: @caller-variable; 
  // .caller-mixin();
  @caller-variable: value;
  .caller-mixin() {
    variable: declaration;
  }
}

引用规则集,仅在其中引用一个规则集就无法访问其上一级的作用域：

@detached-1: { 
	scope-detached: @one @two; 
};

.one {
  @one: visible;
  .two {
    @detached-2: @detached-1; // copying/renaming ruleset 
    @two: visible; // ruleset can not see this variable
  }
}

.use-place {
	//.one();如果没有这句化，会报错
	//因为.one > .two(); 直接调用.one 下的.two()，
	//不会去定义@one: visible;
  .one > .two(); 
  @detached-2();
}

#space {
  .importer-1() {
    @detached: { 
    	scope-detached: @variable; 
    }; 
  }
}

.importer-2() {
  @variable: value; 
  #space > .importer-1(); 
}

.use-place {
  .importer-2(); 
  // @variable: value; 
  //#space > .importer-1(); 

  // @variable: value; 
  // @detached: { 
  //  	scope-detached: @variable; 
  // }; 
   @detached();
}

为了尽量保持CSS的声明性，

Less选择了通过受保护的mixins而不是if/ else语句来实现条件执行

.mixinForProduce (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixinForProduce (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixinForProduce (@a) {
  color: @a;
}

.produce{
	.mixinForProduce(#ed89f0);
}
//也可以使用比较运算符=>，>=，=，=<，<
//此外，关键字true是唯一的真实值，使这两个mixins等效：
.mixinForProduce (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixinForProduce (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixinForProduce (@a) {
  color: @a;
}

.produce{
	.mixinForProduce(#ed89f0);
}

也可以使用逻辑运算符not and 或者用逗号来代表or

使用函数进行类型判断

iscolor 是否是颜色
isnumber 是否是数字
isstring 是否是字符串
iskeyword 是否是关键字参数
isurl 是否是url

如果要检查值是否是数字，是否还使用特定单位，则可以使用以下方法之一：

// ispixel px
// ispercentage %
// isem em
// isunit u

循环

在Less中，mixin可以递归
当与Guard表达式和模式匹配结合使用时，
此类递归mixin 可用于创建各种迭代/循环结构。
例：

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

合并

该功能允许将多个属性的值聚合到单个属性下的逗号或空格分隔的列表中

例：

//合并后使用逗号分隔
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
//合并后使用空格分隔
.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

为了避免意外联接，需要在每个联接挂起声明上使用显式+或+_标志