less

Less （Leaner Style Sheets 的缩写）

是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。是一种基于 CSS 的动态样式语言，它扩展了 CSS 的功能，使得开发者能够更加灵活地编写样式。它通过使用变量、嵌套规则、Mixin、运算和函数等特性来简化 CSS 代码的编写。

概览

Less 具有类似于 CSS 的语法，但是它允许在样式表中使用 变量 ，如下所示：

@primary-color: #007bff;

h1 {
  color: @primary-color;
}

在上面的示例中，@primary-color 是一个变量，它存储了一个颜色值。在 h1 选择器中，我们使用 @primary-color 变量来设置颜色属性，这使得在整个样式表中可以轻松地更改主色调。

此外，Less 还支持 嵌套 规则，这可以使样式表更加易读和易于维护。例如，以下代码：

.card {
  background-color: #fff;
  border: 1px solid #ddd;
  .card-header {
    background-color: @primary-color;
    color: #fff;
  }
}

在上面的示例中，.card-header 的样式规则嵌套在 .card 选择器中，这使得代码更加清晰和易于理解。

Less 还支持 Mixin，这是一种在样式表中定义可重用样式的方法。例如，以下示例定义了一个名为 .border-radius 的 Mixin：

.border-radius (@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.button {
  .border-radius(5px);
}

在上面的示例中，.border-radius Mixin 接受一个参数 @radius，并将其用作 border-radius 属性的值。在 .button 选择器中，我们使用 .border-radius Mixin 来将 border-radius 属性设置为 5 像素。

总的来说，Less 是一种功能强大的样式预处理器，它可以帮助开发者更加高效地编写 CSS 样式表。

变量

在 Less 中，变量可以用来存储值，这些值可以在样式表中多次使用。使用变量可以使代码更加易于维护和修改，同时也可以减少代码中的重复。

概览

---

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

#header {
  width: @width;
  height: @height;
}

编译为

#header {
  width: 10px;
  height: 20px;
}

Less 中的变量以 @ 符号开头，例如：

@primary-color: #007bff;

h1 {
  color: @primary-color;
}

在上面的示例中，@primary-color 是一个变量，其值为 #007bff。在 h1 选择器中，我们使用 @primary-color 变量来设置颜色属性。

Less 中的变量还支持作用域。在 Less 中，变量可以在全局作用域中定义，也可以在选择器或 Mixin 中定义。在选择器或 Mixin 中定义的变量具有局部作用域，只能在该选择器或 Mixin 中使用。以下是一个使用局部变量的示例：

h1 {
  @header-color: #007bff;
  color: @header-color;
}

p {
  color: @header-color; // 这里无法使用 @header-color 变量，因为它是在 h1 选择器中定义的局部变量
}

在上面的示例中，我们在 h1 选择器中定义了一个名为 @header-color 的局部变量，并将其设置为 #007bff。在 h1 选择器中，我们使用 @header-color 变量来设置颜色属性。在 p 选择器中，我们尝试使用 @header-color 变量，但由于它是在 h1 选择器中定义的局部变量，所以会导致编译错误。

除了普通的变量，Less 还支持可以修改的变量和变量插值。可以通过 !default 标记使变量变为可修改，这意味着如果变量已经存在，则不会被重新定义，否则将被定义为给定的值。以下是一个使用可修改变量的示例：

@link-color: blue;
@link-color: green !default;

a {
  color: @link-color;
}

在上面的示例中，我们首先定义了一个名为 @link-color 的变量，并将其设置为 blue。然后，我们再次定义了 @link-color 变量，并将其设置为 green，并使用 !default 标记将其变为可修改变量。在 a 选择器中，我们使用 @link-color 变量来设置链接的颜色。

变量插值可以将变量的值插入到选择器或属性中。例如：

@border-style: solid;
@border-width: 1px;

.border {
  border: @border-width @border-style;
}

在上面的示例中，我们定义了两个变量 @border-style 和 @border-width，并在 .border 选择器中使用它们来设置边框样式。在 border 属性中，我们使用变量插值来将 @border-width 和 @border-style 变量的值插入到边框样式中。

混合

在 Less 中，Mixin 是一种定义可重用样式的方法，它类似于函数，可以接受参数，并在需要时插入到其他选择器中。Mixin 可以提高代码的可读性和可维护性，避免代码重复，同时也可以使代码更加模块化和可重用。

概览

---

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

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

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

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

.post a {
  color: red;
  .bordered();
}

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）

Less 中的 Mixin 可以使用 . 或 # 作为选择器名称，例如：

// 定义一个 .border-radius 的 Mixin
.border-radius(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

// 使用 .border-radius 的 Mixin
.button {
  .border-radius(10px); // 将 @radius 设置为 10px
}

在上面的示例中，我们定义了一个名为 .border-radius 的 Mixin，它接受一个可选参数 @radius，默认值为 5px。在 .button 选择器中，我们使用 .border-radius Mixin，并将 @radius 参数设置为 10px，从而将 .button 元素的 border-radius 属性设置为 10px。

在 Less 中，Mixin 还可以使用参数列表和命名参数。以下是一个使用参数列表的示例：

// 定义一个 .box-shadow 的 Mixin，使用参数列表
.box-shadow(@x: 0, @y: 0, @blur: 5px, @color: #000) {
  box-shadow: @x @y @blur @color;
  -webkit-box-shadow: @x @y @blur @color;
  -moz-box-shadow: @x @y @blur @color;
}

// 使用 .box-shadow 的 Mixin
.box {
  .box-shadow(2px, 2px); // 将 @x 设置为 2px，将 @y 设置为 2px，使用默认的 @blur 和 @color
}

在上面的示例中，我们定义了一个名为 .box-shadow 的 Mixin，并使用参数列表来设置 @x、@y、@blur 和 @color 参数的值。在 .box 选择器中，我们使用 .box-shadow Mixin，并将 @x 和 @y 参数设置为 2px，从而将 .box 元素的阴影设置为偏移 2px。

除了参数列表，Less 的 Mixin 还支持命名参数，这使得代码更加易于阅读和理解。以下是一个使用命名参数的示例：

// 定义一个 .text-shadow 的 Mixin，使用命名参数
.text-shadow(@x: 0, @y: 0, @blur: 5px, @color: #000) {
  text-shadow: @arguments;
}

// 使用 .text-shadow 的 Mixin
h1 {
  .text-shadow(@color: red, @blur: 10px); // 将 @color 设置为 red，将 @blur 设置为 10px，使用默认的 @x 和 @y
}

在上面的示例中，我们定义了一个名为 .text-shadow 的 Mixin，并使用命名参数来设置 @x、@y、@blur 和 @color 参数的值。在 h1 选择器中，我们使用 .text-shadow Mixin，并将 @color 和 @blur 参数设置为 red 和 10px，从而将 h1 元素的文本阴影设置为红色和模糊半径 10px。

总的来说，Less 中的 Mixin 是一种非常强大和灵活的技术，可以帮助开发者更加高效地编写样式表。

嵌套

概览

---

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

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

用 Less 语言我们可以这样书写代码：

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

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin）

(& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

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

了解有关夫选择器的详细信息

@规则嵌套和冒泡

---

@规则

在 Less 中，@规则（At-Rules）是一种特殊的指令，用于控制 Less 编译器的行为或者定义一些特殊的样式规则。@规则以 @ 符号开头，后面跟着指令名称和一些参数。

以下是一些常用的 Less @规则：

• @import：用于导入其他 Less 文件或 CSS 文件。
• @media：用于定义媒体查询，可以根据不同的设备或屏幕大小来应用不同的样式规则。
• @font-face：用于定义自定义字体，可以将自定义字体文件引入到样式表中。
• @keyframes：用于定义动画关键帧，可以定义动画的开始、结束以及中间状态的样式规则。
• @charset：用于指定样式表的字符集。

以下是一个使用 @import 指令的示例：

@import "reset.less";

h1 {
  font-size: 2rem;
  color: #007bff;
}

在上面的示例中，我们使用 @import 指令引入了一个名为 reset.less 的 Less 文件。在文件中，我们可以定义一些样式规则来重置浏览器默认样式。在主样式表中，我们使用 h1 选择器来设置标题的样式规则。

总的来说，@规则是 Less 中非常强大和灵活的特性，可以帮助开发者更加高效地编写样式表。使用正确的 @规则 可以使代码更加易于维护和扩展。

在 Less 中，@规则也可以嵌套在选择器中，这种嵌套可以使代码更加简洁和易于维护。@规则嵌套的语法与选择器嵌套类似，只需要将@规则放在选择器内部即可。

以下是一个使用@规则嵌套的示例：

.btn {
  color: white;
  background-color: blue;

  &:hover {
    background-color: lightblue;
  }

  &::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
  }
}

在上面的示例中，我们使用 & 符号来引用 .btn 选择器，并在其后面添加 :hover 伪类选择器和 ::before 伪元素选择器。这样可以使这些伪类和伪元素继承 .btn 选择器的样式规则，从而减少样式表中的重复代码。

冒泡

此外，在 Less 中，@规则也可以实现冒泡效果。

冒泡是指，当一个选择器中的@规则被覆盖时，它会向外部选择器冒泡，直到找到一个匹配的@规则。这种冒泡效果可以使代码更加灵活和易于维护。

以下是一个使用@规则冒泡的示例：

.btn {
  color: white;
  background-color: blue;

  &.disabled {
    opacity: 0.5;

    &:hover {
      cursor: not-allowed;
    }
  }
}

在上面的示例中，我们使用 .btn.disabled 选择器来设置禁用状态下的样式规则。在 .btn.disabled 选择器中，我们使用 & 符号来引用 .btn 选择器，并使用 :hover 伪类选择器来设置禁用状态下的鼠标指针样式。这样可以使 .btn.disabled:hover 选择器继承 .btn.disabled 和 .btn 选择器的样式规则，从而减少样式表中的重复代码。

总的来说，@规则嵌套和冒泡是 Less 中非常强大和灵活的技术，可以帮助开发者更加高效地编写样式表。适当使用@规则嵌套和冒泡可以使代码更加简洁、易于维护和灵活。

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

.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;
  }
}

嵌套

在 Less 中，嵌套是一种将样式规则组织成层次结构的方法，它可以使样式表更加易于阅读和维护。

嵌套可以将子元素的样式规则嵌套在父元素的样式规则中，以减少样式表中的重复代码。

以下是一个使用嵌套的示例：

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        padding: 0.5rem;
      }
    }
  }
}

在上面的示例中，我们使用嵌套来组织 nav、ul、li 和 a 元素的样式规则。在 nav 选择器中，我们嵌套了 ul 元素的样式规则。在 ul 选择器中，我们嵌套了 li 元素的样式规则。在 li 选择器中，我们嵌套了 a 元素的样式规则。

此外，Less 的嵌套还支持父元素引用 & 符号，它可以用于在选择器中引用父元素。例如：

.btn {
  &.primary {
    background-color: blue;
    color: white;
  }

  &.secondary {
    background-color: gray;
    color: black;
  }
}

在上面的示例中，我们使用 & 符号来引用 .btn 选择器，并在其后面添加 .primary 和 .secondary 类选择器。这样可以使 .primary 和 .secondary 类选择器继承 .btn 选择器的样式规则，从而减少样式表中的重复代码。

• less 嵌套 子元素的样式直接写到父元素里面就好了
• 如果有 伪类、交集选择器、伪元素选择器 我们内存选择器的前面需要添加 &

运算

概览

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

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

还可以对颜色进行算术运算：

@color: (#224488 / 2); // 结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

不过，你会发现 Less 提供的 色彩函数 更有用。

From 4.0, No division is performed outside of parens using / operator.

@color: #222 / 2; // results in `#222 / 2`, not #111
background-color: (#FFFFFF / 16); //results is #101010

calc() 特例

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

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

运算

好的，关于 LESS 中的运算，它支持一些基本的算术运算，比如加、减、乘、除，以及一些其他的运算，如取模、平方根、绝对值等。下面是一些常见的 LESS 运算符和函数：

1. 加、减、乘、除

@width: 100px;
@height: 50px;
@area: @width * @height; // 计算面积

.box {
  width: @width + 10px; // 宽度加 10px
  height: @height - 20px; // 高度减 20px
  line-height: @width / 2; // 行高为宽度的一半
  font-size: @area / 2500; // 字号根据面积计算
}

2. 取模

@num: 17;
@mod: @num % 3; // 取模运算

.box {
  counter-reset: index @mod; // 设置计数器的起始值
}

3. 平方根、绝对值、四舍五入

@num: 16;
@sqrt: sqrt(@num); // 计算平方根
@abs: abs(-10); // 计算绝对值
@round: round(3.14159); // 四舍五入

.box {
  width: @sqrt * 10px; // 宽度为平方根乘以 10px
  height: @abs * 2px; // 高度为绝对值乘以 2px
  font-size: @round * 16px; // 字号为四舍五入乘以 16px
}