Less从0开始：嵌套和导入

蓝德锦
329 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情

嵌套

Less为我们提供了代码嵌套的能力，在编译成CSS后，嵌套的层级会按父子关系编译

.father{ 
    .son{ height: 50px; width: 50px; }
}

// 编译后： 
.father .son { height: 50px; width: 50px; }

注意：嵌套不要盲目使用，因为CSS选择器的长度会影响代码运行的效率，选择器越长，运行时需要查找的条件就越多，效率越低。

使用嵌套后，每个嵌套都是一层作用域，定义的变量也要遵循作用域的规律，比如：

.box{ 
    @r:red;
    color:@r; // 同作用域，正常使用
} 

.box2{ 
    color:@r; // 不同作用域，报错
}

如果当前作用域找不到变量，那么会沿着父类查找：

@r:red; 

.box{ 
    .b{ 
        color:@r; // 正常使用 
    }
}

在嵌套关系中，可以使用&符号来表示上一级选择器：

.father { 

    &-son {
        height: 50px; 
        width: 50px;
        
        &:hover { 
            height: 10px;
        }
    }
} 

//编译后 
.father-son { height: 50px; width: 50px; } 
.father-son:hover { height: 10px; }

这里注意，使用&符号作为选择器的一部分后，和&符号的上级选择器失去了父子关系，所以得到的CSS不是 .father .father-son{}; 了

当然，与再上一级还是保持嵌套关系的：

.all{

    .father{
        height: 200px;
        
        &-son{
            height: 50px;
            width: 50px;
            
            &:hover{
                height: 10px;
            }
        }
    }
} 

// 编译后 
.all .father { height: 200px; } 
.all .father-son { height: 50px; width: 50px; } 
.all .father-son:hover { height: 10px; }

如果你使用&符号并不是用作拼接单个选择器的，而是用作 > ~ 等选择器的，嵌套关系仍会保留：

.father {
    &>.son {
        height: 50px;
        width : 50px;
    }
} 

// 编译后 
.father > .son { height: 50px; width: 50px; }

嵌套关系可以用在某个class多媒体查询中：

.main { 
    @media screen { 
        @media (max-width:768px) {
            width:100px;
        };
        
        @media (min-width:768px) {
            width:100px;
        };
    }
} 

// 编译后 

@media screen and (max-width: 768px) { 
    .main { 
        width: 200px; 
    } 
} 

@media screen and (min-width: 768px) { 
    .main { 
        width: 200px;
    }
}

导入

Less中可以导入其他Less或Css文件进行使用。

1、导入的类型

导入的文件除了Css后缀后，其他文件都将被当做Less文件进行解析

@import "../index.less"
@import "../index"
@import "../index.css"
@import "../index.txt"

2、导入的选项

Less在导入文件时，提供了一些指令，通过指令我们可以控制导入文件的形式。

@import (reference) "../index.less"; // reference不会把导入的代码输出到当前Less转换的Css中。

@import (inline) "../index.css"; // inline指令用于导入css文件时，不对css代码进行处理，因为css中有些代码时不兼容Less的 

@import (less) "../index.css"; // 导入的所有文件，包括css都按less进行处理 

@import (css) "../index.less"; // 导入的文件都当成css处理 

@import (once) "../index.less"; // 当前文件只导入一次，导入文件较多时，可以避免重复导入。 

@import (multiple) "../index.less"; // 当前文件可多次导入，导入几次，同样的代码就会有几次。 

@import (optional) "../index.less"; // 导入文件不存在时，不影响继续编译。

3、使用多个指令

多个指令通过逗号分开。

@import (less, optional) "custom.css";
avatar
文章
阅读
粉丝