Less-導入

  基本使用

使用@import命令來進行導入

如果使用@import進行導入的時候，取決於不同的文件擴展名

基本使用

index.html

 <div class="box">
        123456789
    </div>

index.less

@import "a";
@import "a.css";
.box{
  width: 200px;
  height: 200px;
 .style;
}

a.css

.style{
  color: red;
}

a.less

.style{
  background-color: blue;
}

上面的引入一個是引入了a.less文件，一個是引入了a.css文件，如果要引入less文件，是可以進行省略拓展名的，否則必須要加拓展名

less的導入和css的導入是有區別的，不是傳統的import導入，而是css自己的導入

 

 沒有傳統css的import,是因為less的import不是根據css的import擴展的

 導入的選項

@import (**)內部的 **就是導入的選項，指的是不同的規則配置，需要注意的是@import和后面的括號之間要加空格，否則不編譯

a.less

.style{
  background-color: blue;
}

 @import(reference) 用於導入外部文件，但是如果沒有用到該文件內容的時候，less是不會進行編譯的

@import (reference) "a.less";
.box{
  width: 100px;
  height: 100px;
}

 

  @import(inline) 用於導入外部文件，如果沒有用到該文件的內容， less也會進行導入，inline針對的是css文件，而不是less文件

a.css

.style{
  color: red;
}

@import (inline) "a.css";
.box{
  width: 100px;
  height: 100px;
}

 

如果我們需要按照導入less文件進行導入，此時導入的選項是@import(less)

@import (less) "a.less";
.box{
  width: 100px;
  height: 100px;
  .style;
}

 

 上面導入的是less文件，import的導入即便導入的不是less文件，也會識別該文件的代碼，按照less進行編譯

比如我們導入的是css文件

@import (less) "a.css";
.box{
  width: 100px;
  height: 100px;
  .style;
}

代碼中導入的是一個擴展名為.css的文件，但是import識別了，並且能按照css風格進行編程

 

 如果我們需要按照導入css文件進行導入，此時導入的選項是@import(css)

@import (css) "a.less";
.box{
  width: 100px;
  height: 100px;
}

 

 上面代碼中導入是即便是less文件，也按照css的方式進行編譯

  @import(once) 用於導入外部文件，確保文件只導入一次

@import (once) "a.less";
@import (once) "a.less";
@import (once) "a.less";
@import (once) "a.less";
.box{
  width: 100px;
  height: 100px;
  .style;
}

 

 @import(multiple) 用於導入外部文件，確保文件可以導入多次

@import (multiple) "a.less";
@import (multiple) "a.less";
@import (multiple) "a.less";
@import (multiple) "a.less";
.box{
  width: 100px;
  height: 100px;
  .style;
}

 

  @import(optional) 用於導入外部文件，確保文件導入失敗不會報錯

 此時我們導入一個沒有的文件

@import  "d.less";
.box{
  width: 100px;
  height: 100px;
  .style;
}

 

 可以使用optional來阻止編譯失敗報錯

@import (optional)  "d.less";