Less学习记录

1.介绍

首先是官网：less.bootcss.com，进去后点击头部的概览。就能看到要找的了。接着对它进行简要介绍：Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

2.安装

使用命令行工具将 .less 文件编译成 .css 文件。
通过 npm 安装

npm install less -g
1

对于特定版本，你可以在软件包名称后面添加 @VERSION ，例如 npm install less@2.7.1 -g。
如果你不想将编译器安装到全局环境，则可以

npm i less --save-dev
1

这将在项目文件夹中安装 lessc 的最新正式版本，并将其添加到 package.json 文件中的 devDependencies 配置段中。

3.入门

3-1.变量

使用@创建变量：
①简单变量

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

#header {
  width: @width;
  height: @height;
}
1
2
3
4
5
6
7

编译后：

#header {
  width: 10px;
  height: 20px;
}
1
2
3
4

②选择器：

@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
1
2
3
4
5
6
7
8

编译后：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
1
2
3
4
5

③URL

@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
1
2
3
4
5
6
7

④Import

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";
1
2
3
4
5

3-2.注释

有块注释/**/和行注释//

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;
1
2
3
4
5
6

3-3.混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
首先先定义一个类：

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

然后我们要在另一个类中使用它：

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

1
2
3
4
5

.bordered 类所包含的属性就将出现在 #menu a中。

3-4.嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。
例：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
1
2
3
4
5
6
7
8
9

可以这样写

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
1
2
3
4
5
6
7
8
9

这样更加简洁明了。
&
在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。同时用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。
作为父元素的伪类：

.demo {
   &:after {
    content: '.';
    display: block;
    background-color: aquamarine;
  }
}
1
2
3
4
5
6
7

编译后：

.demo:after {
  content: '.';
  display: block;
  background-color: aquamarine;
}
1
2
3
4
5

作为内层选择器表示对父选择器的引用：
例1：

    .demo {
      &-title {
        text-align: center;
      }
    }
1
2
3
4
5

编译后：

.demo-title {
  text-align: center;
}
1
2
3

例2：

.demo {
  & &-title {
    text-align: center;
  }
}
1
2
3
4
5

编译后：

.demo .demo-title {
  text-align: center;
}
1
2
3

&& 表示.demo.demo
& & 表示.demo .demo
&, & 表示.demo, .demo
1
2
3

反转嵌套的顺序并且可以应用到多个类名上：

.demo-title {
  .demo & {
    font-size: 20px;
  }
}
1
2
3
4
5

编译后：

.demo .demo-title {
  font-size: 20px;
}
1
2
3

3-5.运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
1
2
3
4
5
6
7
8
9
10
11

calc() 特例
为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))
1
2

3-6.函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。Less函数
下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
1
2
3
4
5
6
7
8

3-7.映射

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

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

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
1
2
3
4
5
6
7
8
9

编译后：

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

3-8.作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
例1：

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
1
2
3
4
5
6
7
8

例2：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
1
2
3
4
5
6
7
8