学会如何使用LESS（三）----条件表达式、循环、合并属性和引入

条件表达式

条件表达式其实就是我们在less中使用比较运算符或者表达式的判断来输入我们的值，根据不同的条件来输出不同的值。

一、带条件的混合

比较运算符有以下几种：

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

.class1{
    .mixin( #aaa );
}
.class2{
    .mixin( #333 );
}
           

编译后的css:

.class {
  background-color: black;
}
           

二、类型检查函数

类型检查函数也就是所得的值通过函数去判断是那个类型的值。

如下是一些函数

Iscolor(是否为颜色值) Isnumber(是否为数字) isstring(是否为字符) iskeyword(是否为关键字) isurl(是否为url)

.minix( @a )when(iscolor(@a)){
    background: black;
    color:@a;
}
.minix( @a )when(isnumber(@a)){
    background: white;
    number: @a;
}
.minix( @a )when(isstring(@a)){
    background: orange;
    string: @a;
}
.minix( @a )when(iskeyword(@a)){
    background: yellow;
    keyword: @a;
}
.minix( @a )when(isurl(@a)){
    background: blue;
    url:@a
}
           

编译后的css:

.class1 {
  background: black;
  color: #333333;
}
.class2 {
  background: white;
  number: ;
}
.class3 {
  background: orange;
  string: "hello less!";
}
.class4 {
  background: orange;
  string: "www.baidu.com";
}
           

三、单位检查函数

检查一个值除了数字是否是一个特定的单位。

.minix( @a )when(ispixel(@a)){
    background: yellow;
    pixel: @a;
}
.minix( @a )when(ispercentage(@a)){
    background: blue;
    percentage:@a
}

.class1{
    .minix(px);
}
.class2{
    .minix(83%);
}
           

编译后的css:

.class1 {
  background: yellow;
  pixel: px;
}
.class2 {
  background: blue;
  percentage: %;
}
           

循环

在less中，混合可以调用它自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出个循环结构。

.loop( @count )when( @count >  ){
    [email protected]{count}{
        padding: ( px * @count );
    }
    .loop((@count - ));
}

div{
    .loop();
}
           

编译后的css:

div h5 {
  padding: px;
}
div h4 {
  padding: px;
}
div h3 {
  padding: px;
}
div h2 {
  padding: px;
}
div h1 {
  padding: px;
}
           

合并属性

在需要合并的属性的：前加上+就可以完成合并，合并以，分割属性；

一、在需要合并的属性的;（分号）的前面加上+就可以完成合并，合并以,分割属性

.minix(){
    box-shadow+: inset   px #555; 
}
.myclass{
    .minix;
    box-shadow+: inset   px #222;
}
           

编译后的css:

.myclass {
  box-shadow: inset   px #555, inset   px #222;
}
           

二、“+_”空格分割所合并的属性值

.a(){
    background+_: #333; 
}
.aclass{
    .a;
    background+_: url("sss.jod");
}
           

编译后的css:

.aclass {
  background: #333 url("sss.jod");
}
           

三、如果两种方式混用，则根据最新的判断以什么方式进行分割属性值

.b(){
    background+_: #333; 
}
.bclass{
    .a;
    background+: url("sss.jod");
}

.c(){
    background+: #333; 
}
.cclass{
    .a;
    background+_: url("sss.jod");
}
           

编译后的css:

.bclass {
  background: #333, url("sss.jod");
}
.cclass {
  background: #333 url("sss.jod");
}
           

引入

你可以引入一个或多个less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！

注意：引入css文件会被原样输出到编译的文件中

一些常用的引入

@import (reference) "main.less";  //引用LESS文件，但是不输出
@import (inline) "main.less";  //引用LESS文件，但是不进行操作
@import (once) "main.less";  //引用LESS文件，但是不进行操作
@import (less) "index.css";  //无论是什么格式的文件，都把他作为LESS文件操作
@import (css) "main.less";  //无论是什么格式的文件，都把他作为CSS文件操作