Less 教程学习笔记

什么是Less？

Less 是一种动态样式语言，它扩展了 CSS 语言，使其具有变量、函数、运算符等特性，让 CSS 更易于使用和维护。

安装Less

我们可以通过 npm 包管理器安装 Less：

Copy Code
npm install less

基本语法

变量

我们可以在 Less 中使用变量，它们以 @ 符号开头。例如：

Copy Code
@primary-color: #337ab7;

h1 {
  color: @primary-color;
}

嵌套规则

Less 允许我们将样式规则嵌套在另一个规则中，这样可以更清晰地组织代码。例如：

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

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    text-decoration: none;
  }
}

混合器

我们可以使用混合器将一组样式规则重复使用。例如：

Copy Code
.button {
  background-color: #337ab7;
  border-color: #2e6da4;
  color: #fff;
  padding: 10px 15px;
}

.submit-button {
  .button;
  font-size: 18px;
}

函数

Less 中有许多内置函数，例如用于颜色操作的函数：

Copy Code
@color: #337ab7;

.lighten(@color, 20%);

这将把颜色加亮 20%。

示例

下面是一个简单的 Less 文件示例：

Copy Code
@primary-color: #337ab7;

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

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: @primary-color;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

它将生成以下 CSS：

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

nav li {
  display: inline-block;
  margin: 0 10px;
}

nav a {
  color: #337ab7;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

在 HTML 中使用它如下所示：

Copy Code
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

这将呈现一个包含链接的导航菜单。

希望这篇 Less 教程学习笔记对您有所帮助！