Less从入门到精通——引入（附学习视频、源码及笔记）

完整学习视频及资料在这里哦~
链接：https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw
提取码：4k8t

引入(importing)

引入less文件

• 我们可以引入一个或多个 .less 文件，然后再这个文件中的所有变量都可以在当前 less 文件中使用。
• 语法：@import " ×××" ；里面为需要引入less文件的相对路径，若和当前文件同一目录，则直接写被引入文件的名字，如commont，若是外一层，则为../commont，依次类推。

// 在同一目录 创建comment.less 写入
@font-size:50px;
html {
  font-size: @font-size;
}

// 在我们的项目文件style.less 中引入并使用
@import "common";
div{
    font-size: @font-size;
}
// 输出的style.css为：
html {
  font-size: 50px;
}
div {
  font-size: 50px;
}

引入css文件

• 注意：引入css文件会被原样输出到编译的文件中。
• 格式：@import "×××.css"，同样为绝对路径，不同的是需要加后缀名，因为默认是 less 所以不能省略。
• 引入的css文件不能进行混合。

// 创建同级目录下的common.css文件，写入
.bg{
    background-color: pink;
}
// 引入
@import "common.css";
.div{
    .bg;    		// 报错 不能进行混合
}
// 删掉报错后 输出的css样式为 这样的再把其引入到html中是可以生效的 （无限套娃 哈哈哈）
@import "common.css";

       我们一般写一些公共的 less，来为各个文件使用。

引入可带参数

       在引入的时候我们可以带参数来实现不同的引入效果。

参数	格式	解释
once	@import (once) "com"	默认，只包含一次
reference	@import (reference) "com"	使用Less文件但不输出
inline	@import (inline) "文件名（包括后缀）"	在输出中包含源文件但不加工它,不能使用其变量
less	@import (less) "com"	将文件作为Less文件对象，无论是什么文件扩展名
css	@import (css) "com"	将文件作为CSS文件对象，无论是什么文件扩展名
multiple	@import (mulitiple) "com"	允许引用多次相同文件名的文件
注意：

• 引入了的CSS文件不能进行混合；
• reference参数使用后可以使用被引入文件的变量与之混合，但是被引入的less文件里定义的类与混合不会再被输出，这样就不用一个一个加小括号啦，适用于写通用的 less 文件来供其他 less 文件使用变量和进行混合;
• 使用inline参数，会直接输出其中的类与混合，不能在引入文件中使用其中的变量与混合，适合于书写公共样式，来直接使用;
• 使用多少次multiple参数引入相同的文件，就会输出多少次（每引入一次就输出一次）。

// com.less
@color:pink;
.bg{
    background-color: @color;
}

// 参数使用
// 1. 默认 once
@import (once) "com";
//输出
.bg {
  background-color: pink;
}

// 2. reference
@import (reference) "com";
div{
    color: @color;
}
// 输出
div {
  color: pink;
}
.bg {
  background-color: pink;
}

// 3. inline
@import (inline) "commont.css";
@import (inline) "commont.less";
// 输出
@color:pink;  					// 报错 因为使直接输出 在css中不能这样定义 所以报错
.bg{
    background-color: @color;                  // 报错
}
// 所以 使用inline参数引入less文件时 需要注意

// 4. less
@import (less) "com";
// 输出
.bg {
  background-color: pink;
}

// 5. css
@import (css) "com";
.div{
    .bg;    		// 报错 不能进行混合
}

// 6. multiple
@import (multiple) "com.css";
@import (multiple) "com.css";
// 输出
@import "com.css";
@import "com.css";