条件表达式
条件表达式其实就是我们在less中使用比较运算符或者表达式的判断来输入我们的值,根据不同的条件来输出不同的值。
一、带条件的混合
比较运算符有以下几种:
>,>=,=,=<,<,true
.mixin( @a )when( lightness(@a)>=50% ){
background-color: black;
}
.mixin( @a )when( lightness(@a)<50% ){
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: 123;
}
.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(230px);
}
.class2{
.minix(83%);
}
编译后的css:
.class1 {
background: yellow;
pixel: 230px;
}
.class2 {
background: blue;
percentage: 83%;
}
循环
在less中,混合可以调用它自身,这样,当一个混合递归调用自己,再结合Guard表达式和模式匹配这两个特性,就可以写出个循环结构。
.loop( @count )when( @count > 0 ){
h@{count}{
padding: ( 10px * @count );
}
.loop((@count - 1));
}
div{
.loop(5);
}
编译后的css:
div h5 {
padding: 50px;
}
div h4 {
padding: 40px;
}
div h3 {
padding: 30px;
}
div h2 {
padding: 20px;
}
div h1 {
padding: 10px;
}
合并属性
在需要合并的属性的:前加上+就可以完成合并,合并以,分割属性;
一、在需要合并的属性的;(分号)的前面加上+就可以完成合并,合并以,分割属性
.minix(){
box-shadow+: inset 0 0 10px #555;
}
.myclass{
.minix;
box-shadow+: inset 0 0 20px #222;
}
编译后的css:
.myclass {
box-shadow: inset 0 0 10px #555, inset 0 0 20px #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文件操作