LESS : CSS 預處理器 - daniel-qa/Vue GitHub Wiki

LESS : CSS 預處理器

LESS 就是把 css 的設定值，改為變數，統一管理的方式

  • 範例

LESS 文件：styles.less

// 定义变量
@primary-color: #4CAF50;

// 使用嵌套规则和变量
button {
  color: white;
  background-color: @primary-color;
  border: none;
  padding: 10px 20px;

  &:hover {
    background-color: darken(@primary-color, 10%);
  }
}

// 使用混合 (Mixin)
.rounded-corners(@radius: 5px) {
  border-radius: @radius;
}

div {
  .rounded-corners(10px);
  padding: 20px;
  background-color: lighten(@primary-color, 30%);
}
  • 生成的 CSS：styles.css

编译后的 CSS 文件内容如下：

button {
  color: white;
  background-color: #4CAF50;
  border: none;
  padding: 10px 20px;
}
button:hover {
  background-color: #3e8e41; /* darken 的计算结果 */
}
div {
  border-radius: 10px;
  padding: 20px;
  background-color: #a8ddb0; /* lighten 的计算结果 */
}

*如何运行这个示例

    1. 安装 LESS 编译器

确保你已经安装了 LESS：

npm install -g less
    1. 编译 LESS 运行以下命令，将 styles.less 编译为 styles.css：
lessc styles.less styles.css
    1. 在 HTML 中使用

将生成的 styles.css 文件引入到你的 HTML 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LESS Sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button>Click Me</button>
  <div>Rounded Box</div>
</body>
</html>
  • 效果

一个绿色按钮，鼠标悬停时颜色变深。

一个圆角的 div，背景色为浅绿色。

⚠️ **GitHub.com Fallback** ⚠️