系列文章目录

一                、继承

1
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
、extend 关键字的使用

extend 是 Less 的一个伪类 
  
  
  
  
  
  
  ，它可继承所匹配声明中的全部样式

index.less 文件

.animation { transition: all .3s ease-out; .hide { transform: scale(0); } } #main { &:extend(.animation); } #con { &:extend(.animation .hide); }

index.css 文件

自动转义后的 css 文件内容如下 .animation, #main { transition: all 0.3s ease-out; } .animation .hide, #con { transform: scale(0); }

2














、all 全局搜索替换

使用选择器匹配到的全部声明

index.less 文件

#main { width: 200px; } #main { &:after { content: Less is more. } } #wrap:extend(#main all) { height: 200px; }

index.css 文件

自动转义后的 css 文件内容如下 #main, #wrap { width: 200px; } #main:after, #wrap:after { content: Less is more.; } #wrap { height: 200px; }

3  
  
  
  
  
  
  
  、减少代码的重复性

extend 与方法的最大差别 
  
  
  
  
  
  
  
 ，就是 extend 是同个选择器共用同一个声明

 


 


 


 


 


 


 


，而方法是使用自己的声明 
 
 
 
 
 
 
 ，这就增加了代码的重复性

index.less 文件

.method { width: 200px; &:after { content: Less is more; } } #main { .method }

index.css 文件

自动转义后的 css 文件内容如下 .method { width: 200px; } .method:after { content: Less is more; } #main { width: 200px; } #main:after { content: Less is more; }

二 
  
  
  
  
  
  
  
、导入

1


 


 


 


 


 


 


 

、文件导入

nav.less 文件

定义要导入的文件的样式 #nav { width: 100%; height: 200px; background: pink; }

index.less 文件

把 nav.less 文件导入进来 @import nav;

index.css 文件

自动转义后的 css 文件内容如下 #nav { width: 100%; height: 200px; background: pink; }

2 
 
 
 
 
 
 
 、reference

Less 中最强大的特性 
   
   
   
   
   
   
   
 ，使用引入的Less文件
 

 

 

 

 

 

 

，但不会编译它

nav.less 文件

定义要导入的文件的样式 #nav { width: 100%; height: 200px; background: pink; }

index.less 文件

把 nav.less 文件导入进来 @import (reference) nav;

index.css 文件

// 不会编译
 

 

 

 

 

 

 

 ，内容为空

3  
   
   
   
   
   
   
   
、once

@import 语句的默认行为 
  
  
  
  
  
  
  。这表明相同的文件只会被导入一次               ，而随后的导入文件的重复代码都不会解析

nav.less 文件

定义要导入的文件的样式 #nav { width: 100%; height: 200px; background: pink; }

index.less 文件

把 nav.less 文件导入进来 @import (once) nav; @import (once) nav;

index.css 文件

自动转义后的 css 文件内容如下 导入多次也只有一次生效 #nav { width: 100%; height: 200px; background: pink; }

4

 

 

 

 

 

 

 
、multiple

可以多次导入

nav.less 文件

定义要导入的文件的样式 #nav { width: 100%; height: 200px; background: pink; }

index.less 文件

把 nav.less 文件导入进来 @import (multiple) nav; @import (multiple) nav;

index.css 文件

自动转义后的 css 文件内容如下 可以被导入多次 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，生效多次 #nav { width: 100%; height: 200px; background: pink; } #nav { width: 100%; height: 200px; background: pink; }

三
 

 

 

 

 

 

 

 、条件表达式

1               、带条件的混合

格式：when () {}

index.less 文件

.mixin(@a) when(lightness(@a) >= 50%) { background: black; } .mixin(@a) when(lightness(@a) < 50%) { background: white; } .mixin(@a) { color: @a; } .class1 { .mixin(#ddd); } .class2 { .mixin(#555); }

index.css 文件

自动转义后的 css 文件内容如下 .class1 { background: black; color: #ddd; } .class2 { background: white; color: #555; }

2
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
、类型检测函数

检测值的类型

iscolor isnumber isstring iskeyword isurl

index.less 文件

.mixin(@a:#fff; @b:0) when(isNumber(@b)) { color: @a; font-size: @b; } .mixin(@a, @b:black) when (isColor(@b)) { font-size: @a; color: @b; } .class { .mixin(#666) }

index.css 文件

自动转义后的 css 文件内容如下 .class { color: #666; font-size: 0; font-size: #666; color: black; }

3














、单位检测函数

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

ispixel：px ispercentage：% isem：em isunit：int

index.less 文件

.mixin(@a) when(ispixel(@a)) { width: @a; } .class { .mixin(960px); }

index.css 文件

自动转义后的 css 文件内容如下 .class { width: 960px; }

四                       、函数

示例：color() 函数














，解析颜色                       ，将代表颜色的字符串转换为颜色值

index.less 文件

body { color: color("#f60"); background: color("red"); }

index.css 文件

自动转义后的 css 文件内容如下 body { color: #f60; background: #ff0000; }

五
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、写在最后

Less 官网链接

Less 入门到此结束 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，这些已经可以应对基本的开发 
  
  
  
  
  
  
  
 。

如果你想学习更多内容






















，那么推荐去 Less 官网进行深入学习

 


 


 


 


 


 


 


。

这里是 前端杂货铺               ，期待您的 三连 + 关注