LESS

 Less：

基于CSS的一种扩展技术，包含变量、混合、函数、运算，能够简化CSS代码，下降维护成本。必须经过解析器将less文件转换为css文件供页面使用。

一、  步骤

新建一个文件夹，在文件夹里新建html、less文件（至始至终不会创建CSS文件）

启动Koala

配置路径

在less文件里写内容，刷新koala软件会自动生成css文件

在html里引入生成的css文件

在less里也能够引入文件，用@import

二、  变量

@名称:值

属性名：@名称

@border:1px solid black;

@background:green;

@outline:1px solid black;

 

div{

  border:@border;

  background: @background;

}

 

三、混合Mixins(针对通用的属性集,多个不一样属性)，.名称{属性名+属性值（声明）}

////任何 CSS class, id 或者 元素 属性集均可以以一样的方式引入。

////class属性集

.widthHeight{

  width: 200px;

  height: 200px;

}

////id属性集

#fontsize{

  font-size: 30px;

}

 

//元素属性集

div{

  font-weight: bolder;

}

 

 

div{

  .widthHeight;

  #fontsize;

}

 

//

四、带参数的混合(调用多个参数，值可变,属性集合)，.名称（参数）{属性名：参数}

////调用参数

.backgroundUrl(@url){

  background: @url;

}

五、给参数设置默认值

.borderRadius(@length:10px){

  border-radius: @length;

  -webkit-border-radius: @length;

  -moz-border-radius: @length;

}

 

div{

  .backgroundUrl(url("1.jpg"));

  .borderRadius;

}

 

六、不带参数的属性集

//

.pAll(){

  font-size: 40px;

  color: #0000FF;

  font-weight: bolder;

  border: 1px solid black;

  width: 100px;

  height: 100px;

}

 

p{

  .pAll;

}

//

七、多参数混合

////使用逗号做为参数分隔符意味着能够将逗号分隔的一组值做为一个变量处理。换句话说，若是编译器在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，全部的逗号都属于参数中的一组值的分隔符。

////2个参数，每一个参数都含有经过逗号分隔的一组值的状况：.name(1, 2, 3; something, else)。

////3个参数，每一个参数只含一个数字的状况：.name(1, 2, 3)。

////   使用一个象征性的分号能够建立一个只含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。

////    逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。

////   使用一样的名字和一样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到全部能够应用的混合上。好比你调用混合时只传了一个参数.mixin(green)，那么全部只强制要求一个参数的混合都会被调用：

//

//

////多参数混合

.mixin(@margin;@padding){

  margin: @margin;

  padding: @padding;

}

p{

  .mixin(50px;100px)

}