Less的特性介绍

Less是一种CSS预处理器，它扩展了CSS的功能，提供了变量、嵌套、混合、运算等特性，让CSS代码更易于维护和扩展。下面详细介绍Less的核心特性。

变量

Less允许使用变量存储颜色、字体、尺寸等值，便于统一管理和修改。变量以@开头定义，可以在整个样式表中重复使用。

@primary-color: #428bca;
@font-size: 14px;

.header {
  color: @primary-color;
  font-size: @font-size;
}

编译后的CSS：

.header {
  color: #428bca;
  font-size: 14px;
}

变量还支持运算：

@base-padding: 10px;
@double-padding: @base-padding * 2;

.box {
  padding: @double-padding;
}

嵌套

Less支持嵌套规则，可以更清晰地表达层级关系，减少重复代码。

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

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    &:hover {
      color: red;
    }
  }
}

编译后的CSS：

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  display: inline-block;
}
.nav a {
  text-decoration: none;
}
.nav a:hover {
  color: red;
}

混合（Mixins）

混合允许将一组属性从一个规则集引入到另一个规则集，类似于函数。

.bordered {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ddd;
}

.menu {
  color: #333;
  .bordered();
}

编译后的CSS：

.bordered {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ddd;
}
.menu {
  color: #333;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ddd;
}

混合还可以带参数：

.rounded-corners(@radius: 5px) {
  border-radius: @radius;
}

.button {
  .rounded-corners();
}

.card {
  .rounded-corners(10px);
}

运算

Less支持加减乘除运算，可以对数值、颜色、变量进行计算。

@base-width: 100px;
@padding: 20px;

.container {
  width: @base-width + @padding;
  height: (@base-width / 2) - 5;
  background-color: #888 + #111;
}

编译后的CSS：

.container {
  width: 120px;
  height: 45px;
  background-color: #999;
}

函数

Less内置了许多函数，用于处理颜色、字符串、数学运算等。

@color: #ff0000;

.header {
  background-color: lighten(@color, 20%);
  color: darken(@color, 10%);
}

编译后的CSS：

.header {
  background-color: #ff6666;
  color: #cc0000;
}

导入

Less支持文件导入，可以将样式拆分为多个文件，便于模块化管理。

@import "variables.less";
@import "mixins.less";
@import "components.less";

条件与循环

Less支持条件语句和循环，可以根据条件生成不同的样式。

@theme: dark;

.theme-style() when (@theme = dark) {
  background-color: #333;
  color: #fff;
}

.theme-style() when (@theme = light) {
  background-color: #fff;
  color: #333;
}

body {
  .theme-style();
}

循环示例：

.generate-columns(@n, @i: 1) when (@i <= @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.generate-columns(4);

编译后的CSS：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

命名空间

Less支持命名空间，可以将混合分组，避免命名冲突。

#utilities {
  .clearfix() {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }
}

.container {
  #utilities > .clearfix();
}

作用域

Less中的作用域与编程语言类似，变量和混合的查找从内向外。

@var: red;

#page {
  @var: white;
  .header {
    color: @var; // white
  }
}

.footer {
  color: @var; // red
}

字符串插值

Less支持字符串插值，可以将变量嵌入字符串中。

@base-url: "http://example.com";

.background {
  background-image: url("@{base-url}/images/bg.png");
}

注释

Less支持单行和多行注释，单行注释不会被编译到CSS中。

// 这是单行注释，不会出现在CSS中
/* 这是多行注释，会出现在CSS中 */

.body {
  color: #333; // 这也是单行注释
}