LESS

Posted 2020-08-09

 Less：

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

1、  步骤

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

启动Koala

配置路径

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

在html里引入生成的css文件

在less里也可以引入文件，用@import

2、  变量

@名称:值

属性名：@名称

@border:1px solid black;

@background:green;

@outline:1px solid black;

 

div{

  border:@border;

  background: @background;

}

 

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

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

////class属性集

.widthHeight{

  width: 200px;

  height: 200px;

}

////id属性集

#fontsize{

  font-size: 30px;

}

 

//元素属性集

div{

  font-weight: bolder;

}

 

 

div{

  .widthHeight;

  #fontsize;

}

 

//

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

////调用参数

.backgroundUrl(@url){

  background: @url;

}

5、给参数设置默认值

.borderRadius(@length:10px){

  border-radius: @length;

  -webkit-border-radius: @length;

  -moz-border-radius: @length;

}

 

div{

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

  .borderRadius;

}

 

6、不带参数的属性集

//

.pAll(){

  font-size: 40px;

  color: #0000FF;

  font-weight: bolder;

  border: 1px solid black;

  width: 100px;

  height: 100px;

}

 

p{

  .pAll;

}

//

7、多参数混合

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

////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)

}