Less的基本使用

官方链接:https://less.bootcss.com/#overview

Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展。

变量(Variables)

 /*less*/
@width: 20px;   // 定义变量
@height: @width + 20px;

#header {
  width: @width;    // 使用变量
  height: @height;
  border: 1px solid red;
}

 

编译后

/*css*/
#header {
  width: 20px;
  height: 40px;
  border: 1px solid red;
}

混合(Mixins)

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。

 /*less*/
@width: 20px;   
@height: @width + 20px;

#set {    // 定义
  width: @width;    
  height: @height;
  border: 1px solid red;
}
#header{
    #set()  // 使用
}

嵌套(Nesting)

Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。

/*less*/
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

编译后

/*css*/
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

映射(Maps)

从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。

/*less*/
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

编译后

.button {
  color: blue;
  border: 1px solid green;
}

导入(Importing)

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名,则可以将扩展名省略掉:

@import "library"; // library.less
@import "typo.css";

 

上一篇:【转载】 t-SNE使用过程中的一些坑


下一篇:纯CSS3代码实现switch滑动开关按钮效果