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

完整学习视频及资料在这里哦~
连接：https://pan.baidu.com/s/1cXs9KKoIFP1M5oTClSr7yg
提取码：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";