Less（v3.9.0）使用详解—基本用法-优快云博客

该系列：

其他待更新...

less是css的扩展，能通过特殊的语法写样式，然后自带工具编译为浏览器所能识别的css，下面是其一些基本用法，一般开发只需用到这些功能。

变量

@符号声明和引用，可写成表达式的形式

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
复制代码

编译为

#header {
  width: 10px;
  height: 20px;
}
复制代码

混入（MIXINS）

minxins能够把一串样式规则封装起来,方便复用

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
复制代码

编译后

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
复制代码

注意不是非得类选择器（我看很多例子都用类选择器），也可以用id选择器

#ids{
    color:red;
}
复制代码

嵌套

当css选择器存在父子关系时，可以像下面这样书写

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
复制代码

编译为

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
复制代码

注意&在嵌套里表示所有祖先选择器，下面是个清除浮动的例子

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
复制代码

当遇到样式表规则比如@media或@supports时，他会冒泡寻找规则

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}
复制代码

编译成

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
复制代码

操作符

+, -, *, / 能用在数字，颜色，变量操作上,以最左边出现的单位为主，如果单位转换不了，无视右边单位，*和/单位无效

// 能够转换成同一单位
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// px和cm转换不了，以px为单位，计算（2+5-3）
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

//*和/对单位没有意义
@base: 2cm * 3mm; // result is 6cm
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
复制代码

calc（v3.0.0）

由于操作符的特性，导致直接在less在3.0版本下使用calc计算表达式会出现意向不到的现象

width: calc(50% + (25vh - 20px));  // result is calc(55%)
复制代码

不过3.0版本就修复了这个问题，calc里的表达式编译会保持原样，变量会被替换

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))
复制代码

Escaping(转义)

当我们需要使用一个固定的值时，可以使用~“anything”或~‘anything’，比如上面的calc出现的问题就可以这样解决

@var: 50vh/2;
width: calc(~"50% + (@{var} - 20px)");  // result is calc(50% + (25vh - 20px))
复制代码

方法

less内置了很多方法

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // 百分比 returns `50%`
  color: saturate(@base, 5%); 
  background-color: spin(lighten(@base, 25%), 8);
}
复制代码

Namespaces and Accessors

namespace类似mixin，是为了更好封装css，不会再像mixin一样在编译后出现

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

#header a {
  color: orange;
  #bundle.button();  // can also be written as #bundle > .button
}
复制代码

编译为

#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}

#header a:hover{
    background-color: white;
}
复制代码

注意namespace的（），不写的或就会在编译中出现

Map（v3.5.0）

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

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

编译成

.button {
  color: blue;
  border: 1px solid green;
}
复制代码

作用域

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
复制代码

从内向外找，具有变量提升

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
复制代码

注释

/* One heck of a block
 * style comment! */
@var: red;

// Get in line!
@var: white;
复制代码

导入

导入的文件包含的变量可以正常范围，默认后缀是less

@import "library"; // library.less
@import "typo.css";
复制代码