跟我一起了解less（6）：less和css文件的引入

时间：2024-03-08 18:12:28

不同于css中的import，less可以在文件中的任何一个地方引入，包括选择器中或者函数中。

并且less还对import提供了不同的参数：reference、inline、less、css、multiple、once，如果不指定参数默认是once，下面对各个参数进行了解释

 

@import (reference) "css/reference.less"; //引入less文件不输出
@import (reference) "css/reference.php"; //引入less文件不输出，不区分后缀名也能引入
@import (inline) "css/inline.css"; //引入源文件，但不加工它，只解析css语法，不解析less语法，包括注释符“//”
@import (inline) "css/inline.less"; //引入源文件，但不加工它，不区分后缀名也能引入，相当于以css文件的方式读取
@import (less) "css/less.php"; //引入文件，以less文件格式解析，无论什么后缀名
@import (css) "css/css.php"; //引入文件，以css文件格式解析，无论什么后缀名，等同于inline

@import (multiple) "css/multiple.less"; //同一个文件多次引用

@import (once) "css/once.less"; //只引入一次

 

接下来我们逐个举例说明一下。。。

 

1、reference

@import (reference) "css/reference.less"; //引入less文件不输出

@import (reference) "css/reference.php"; //引入less文件不输出，不区分后缀名也能引入

//这是reference.less文件
//@import (reference) reference.less
//使用less文件但不输出
.size() {
    width:160px;
    height:50px;
    border:1px solid black;
    background:greenyellow;
}
.box-part1 { //直接选择器不输出
    .size();
}
.box-part1&:before { //通过&连接符组合的选择器能输出
    .size();
    content:"box-part1-reference";
}
//所以下面这样也可以输出：
@head:box-;
.@{head}&part2 {
    .size();
}
.@{head}&part2&:before {
    .size();
    content:"box-part2-reference";
}
//这是reference.php文件（和上边的文件内容一模一样）
//@import (reference) reference.php
//使用less文件但不输出
.size() {
    width:160px;
    height:50px;
    border:1px solid black;
    background:greenyellow;
}
.box-part1 { //直接选择器不输出
    .size();
}
.box-part1&:before { //通过&连接符组合的选择器能输出
    .size();
    content:"box-part1-reference";
}
//所以下面这样也可以输出：
@head:box-;
.@{head}&part2 {
    .size();
}
.@{head}&part2&:before {
    .size();
    content:"box-part2-reference";
}

这是结果：

发现对通过&连接符处理过的选择器不起作用，可以看得出来这个参数并没有完全屏蔽选择器

 

2、inline

@import (inline) "css/inline.css"; //引入源文件，但不加工它，只解析css语法，不解析less语法，包括注释符“//”

@import (inline) "css/inline.less"; //引入源文件，但不加工它，不区分后缀名也能引入，相当于以css文件的方式读取

/*这是inline.css文件*/
/*@import (inline) inline.css*/
/*输出中包含该文件，但不加工它*/
.color() {
    background:green;
}
.box-part1 {
    width:50px; /*css的语法正常解析*/
    height:50px;
    border:1px solid blue;
    .color(); /*less的语法不解析*/
}
/*这是inline.less文件*/
/*@import (inline) inline.less*/
/*输出中包含该文件，但不加工它*/
.color() {
    background:green;
}
.box-part2 {
    width:50px;
    height:50px;
    border:1px solid blue;
    .color();
}

这是结果：

 

由此看到，引入的文件如果不经过less加工，就相当于css文件，然而，inline的方式引入又不区分后缀名，那就等同于直接引入css文件。

 

3、less/css

这两个参数就是将文件解析成less语言或者css语言，不区分后缀名，而css的作用又和inline作用相同。

@import (less) "css/less.php"; //引入文件，以less文件格式解析，无论什么后缀名
@import (css) "css/css.php"; //引入文件，以css文件格式解析，无论什么后缀名，等同于inline

 

4、multiple/once

@import (multiple) "css/multiple.less"; //同一个文件多次引用

@import (once) "css/once.less"; //只引入一次

我用下面的代码举个例子：

//一次引用和多次引用
.size(@w;@h;@c) {
    width:@w;
    height:@h;
    background:@c;
}
@import (multiple) "css/multiple.less"; //同一个文件多次引用
@width_m:25px; //当引入的文件里的内容被改的时候，通过再引用一次恢复初始值
@height_m:25px;
@color_m:#444;
.box-part1 {
    .size(@width_m;@height_m;@color_m);
}
.box-part2 {
    @import (multiple) "css/multiple.less"; //同一个文件多次引用，用于初始化文件
    .size(@width_m;@height_m;@color_m);
}
@import (once) "css/once.less"; //只引入一次
@width_o:25px;
@height_o:25px;
@color_o:#444;
.box-part3 {
    .size(@width_o;@height_o;@color_o);
}
.box-part4 {
    @import "css/once.less"; //如果是只引入一次这里就引入不了了
    .size(@width_o;@height_o;@color_o);
}

//这是multiple.less文件
//@import (multiple) multiple.less 
//同名文件可以多次读取
@width_m:50px;
@height_m:50px;
@color_m:red;
//这是once.less文件
//@import once.less
//只读一次，默认参数
@width_o:50px;
@height_o:50px;
@color_o:blue;

这是结果：

因为.box-part1、.box-part2用的是multiple，所以.box-part2可以重新获取了文件中变量的值，变成了红色的大方块。

而.box-part3、.box-part4用的是once，第二次引入同一个文件的时候没有生效，所以并没有获取到文件中变量的值，仍然是黑色的方块。

所以我考虑到，multiple的作用可能是用于初始化变量或者重构方法。

 

to be continue ......

 

相关文章