Less预处理——继承、导入、条件表达式和函数

落日映苍穹つ 2023-09-26 09:21 7阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *   *  一、继承
     *   *  1、extend 关键字的使用
         *  2、all 全局搜索替换
         *  3、减少代码的重复性
     *  二、导入
     *   *  1、文件导入
         *  2、reference
         *  3、once
         *  4、multiple
     *  三、条件表达式
     *   *  1、带条件的混合
         *  2、类型检测函数
         *  3、单位检测函数
     *  四、函数
     *  五、写在最后

--------------------

### 一、继承 ###

#### 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;
    }

### 四、函数 ###