跳至主要內容

Less

望间2025/11/4代码Less大约 8 分钟

基本介绍

Less 是一种动态样式语言，它扩展了 CSS 的功能，添加了变量、混合（mixins）、嵌套规则、函数等特性。

安装与使用

安装

Node.js 安装

npm install -g less

客户端使用

直接在 HTML 中引入 Less.js 脚本：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4.1.3/dist/less.min.js"></script>

构建工具集成

Webpack
# Webpack 相关包
npm install less less-loader --save-dev
Vite
# Vite 项目中安装 Less
npm install -D less

Vite 内置支持 Less，安装后即可直接导入 .less 文件使用。如需自定义 Less 选项，可在 vite.config.js 中配置：

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      less: {
        // 全局变量
        additionalData: `@primary-color: #3498db;`,
        // 其他 Less 配置选项
        javascriptEnabled: true
      }
    }
  }
}
Gulp
# Gulp 相关包
npm install gulp gulp-less --save-dev

编译方式

命令行编译

lessc styles.less styles.css

压缩输出

lessc --compress styles.less styles.min.css

核心特性

变量（Variables）

变量允许你在一处定义颜色、尺寸等常用值，然后在整个样式表中重复使用。

@primary-color: #3498db;
@font-size: 16px;
@border-radius: 4px;

.button {
  color: @primary-color;
  font-size: @font-size;
  border-radius: @border-radius;
}

编译后的 CSS：

.button {
  color: #3498db;
  font-size: 16px;
  border-radius: 4px;
}

嵌套规则（Nesting）

嵌套规则允许你在父选择器中嵌套子选择器，使代码结构更清晰，反映 HTML 的层级关系。

.nav {
  background-color: #f5f5f5;
  padding: 1rem;
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      display: inline-block;
      margin-right: 1rem;
      
      a {
        color: #333;
        text-decoration: none;
        
        &:hover {
          color: @primary-color;
        }
      }
    }
  }
}

编译后的 CSS：

.nav {
  background-color: #f5f5f5;
  padding: 1rem;
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav ul li {
  display: inline-block;
  margin-right: 1rem;
}
.nav ul li a {
  color: #333;
  text-decoration: none;
}
.nav ul li a:hover {
  color: #3498db;
}

混合（Mixins）

混合允许你将一组 CSS 属性从一个规则集包含到另一个规则集中，实现代码复用。

基本混合

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

.menu a {
  .bordered();
  display: block;
}

编译后的 CSS：

.bordered {
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}
.menu a {
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  display: block;
}

带参数的混合

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

.button {
  .border-radius(10px);
}
.box {
  .border-radius(); // 使用默认值 5px
}

编译后的 CSS：

.button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

无输出混合

使用括号可以定义不会在编译后的 CSS 中输出的混合：

.bordered() {
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

.menu a {
  .bordered();
  display: block;
}

编译后的 CSS：

.menu a {
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  display: block;
}

运算（Operations）

Less 支持在 CSS 属性值中进行算术运算，包括加减乘除。

@base-size: 10px;
@double-size: @base-size * 2;
@half-size: @base-size / 2;

.container {
  width: @double-size + 5px;
  margin-top: @half-size;
}

编译后的 CSS：

.container {
  width: 25px;
  margin-top: 5px;
}

函数（Functions）

Less 提供了丰富的内置函数，用于颜色操作、数学计算、字符串处理、列表操作等。以下是一些最常用的函数分类及其用法：

颜色函数

颜色函数用于操作颜色值，可以调整亮度、饱和度、透明度等。

@color: #3498db;

/* 调整亮度 */
.darker {
  color: darken(@color, 10%); /* 降低亮度 */
}
.lighter {
  color: lighten(@color, 10%); /* 增加亮度 */
}

/* 调整饱和度 */
.more-saturated {
  color: saturate(@color, 20%); /* 增加饱和度 */
}
.less-saturated {
  color: desaturate(@color, 20%); /* 减少饱和度 */
}
.grayscale {
  color: grayscale(@color); /* 转换为灰度 */
}

/* 调整透明度 */
.semi-transparent {
  background-color: fade(@color, 50%); /* 设置透明度为 50% */
}
.more-opaque {
  background-color: fadein(rgba(52, 152, 219, 0.3), 20%); /* 增加不透明度 20% */
}
.more-transparent {
  background-color: fadeout(@color, 30%); /* 增加透明度 30% */
}

/* 颜色混合 */
.mixed-color {
  color: mix(@color, #e74c3c, 50%); /* 混合两种颜色 */
}

/* 色调旋转 */
.complement {
  color: spin(@color, 180deg); /* 旋转 180 度，得到互补色 */
}

/* 提取颜色通道 */
.red-channel {
  color: rgb(red(@color), 0, 0); /* 提取红色通道值 */
}
.green-channel {
  color: rgb(0, green(@color), 0); /* 提取绿色通道值 */
}
.blue-channel {
  color: rgb(0, 0, blue(@color)); /* 提取蓝色通道值 */
}

/* HSL 颜色操作 */
.hsl-color {
  color: hsl(hue(@color), saturation(@color), lightness(@color) + 10%);
}

编译后的 CSS：

.darker {
  color: #2980b9;
}
.lighter {
  color: #5dade2;
}
.more-saturated {
  color: #1a90e2;
}
.less-saturated {
  color: #61a4d6;
}
.grayscale {
  color: #7f8c8d;
}
.semi-transparent {
  background-color: rgba(52, 152, 219, 0.5);
}
.more-opaque {
  background-color: rgba(52, 152, 219, 0.5);
}
.more-transparent {
  background-color: rgba(52, 152, 219, 0.7);
}
.mixed-color {
  color: #c16f55;
}
.complement {
  color: #db6f34;
}
.red-channel {
  color: #340000;
}
.green-channel {
  color: #009800;
}
.blue-channel {
  color: #0000db;
}
.hsl-color {
  color: #5dade2;
}

数学函数

数学函数用于处理数值计算。

@width: 100px;
@height: 200px;
@base: 16;
@ratio: 1.618;

/* 比较函数 */
.max-value {
  width: max(@width, @height); /* 返回最大值 */
}
.min-value {
  height: min(@width, @height); /* 返回最小值 */
}

/* 四舍五入 */
.rounded {
  font-size: round(15.5px); /* 四舍五入 */
  line-height: ceil(1.2); /* 向上取整 */
  letter-spacing: floor(2.9px); /* 向下取整 */
}

/* 百分比转换 */
.percentage {
  width: percentage(9/16); /* 将分数转换为百分比 */
}

/* 绝对值 */
.absolute {
  margin-left: abs(-10px); /* 取绝对值 */
}

/* 平方根 */
.square-root {
  border-radius: sqrt(64px); /* 计算平方根 */
}

/* 指数运算 */
.power {
  transform: scale(pow(2, 3)); /* 计算 2^3 */
}

/* 随机数 */
.random-bg {
  opacity: random(); /* 生成 0-1 之间的随机数 */
}

编译后的 CSS：

.max-value {
  width: 200px;
}
.min-value {
  height: 100px;
}
.rounded {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 2px;
}
.percentage {
  width: 56.25%;
}
.absolute {
  margin-left: 10px;
}
.square-root {
  border-radius: 8px;
}
.power {
  transform: scale(8);
}
.random-bg {
  opacity: 0.40154111733603104; /* 注意：实际生成的随机数会不同 */
}

字符串函数

字符串函数用于处理字符串值。

@base-url: "https://example.com";
@filename: "image";
@extension: ".jpg";

/* 字符串拼接 */
.full-url {
  background-image: url(@base-url + "/images/hero.jpg");
}
.file-path {
  content: "@{filename}@{extension}"; /* 变量插值 */
}

/* 转大写/小写 */
.uppercase-text {
  content: e("'" + upper-case("hello world") + "'");
}
.lowercase-text {
  content: e("'" + lower-case("HELLO WORLD") + "'");
}

编译后的 CSS：

.full-url {
  background-image: url("https://example.com/images/hero.jpg");
}
.file-path {
  content: "image.jpg";
}
.uppercase-text {
  content: 'HELLO WORLD';
}
.lowercase-text {
  content: 'hello world';
}

列表函数

列表函数用于处理值列表。

@list: 1px solid #333;
@margin-list: 10px 20px 15px 5px;

/* 获取列表长度 */
.length {
  content: length(@list);
}

/* 获取列表中的值 */
.first-item {
  margin-left: extract(@margin-list, 1); /* 获取第一个值 */
}
.last-item {
  margin-bottom: extract(@margin-list, 4); /* 获取最后一个值 */
}

/* 包含检查 */
.contains-check {
  content: contains(@list, solid); /* 检查是否包含某个值 */
}

编译后的 CSS：

.length {
  content: 3;
}
.first-item {
  margin-left: 10px;
}
.last-item {
  margin-bottom: 5px;
}
.contains-check {
  content: true;
}

类型函数

类型函数用于检查值的类型。

@number: 123;
@string: "hello";
@color: #3498db;
@bool: true;

/* 类型检查 */
.is-number {
  content: isnumber(@number); /* 检查是否为数字 */
}
.is-string {
  content: isstring(@string); /* 检查是否为字符串 */
}
.is-color {
  content: iscolor(@color); /* 检查是否为颜色 */
}
.is-boolean {
  content: isboolean(@bool); /* 检查是否为布尔值 */
}
.is-url {
  content: isurl("https://example.com"); /* 检查是否为 URL */
}
.ispixel {
  content: ispixel(10px); /* 检查是否为像素值 */
}

编译后的 CSS：

.is-number {
  content: true;
}
.is-string {
  content: true;
}
.is-color {
  content: true;
}
.is-boolean {
  content: true;
}
.is-url {
  content: true;
}
.ispixel {
  content: true;
}

命名空间和访问器

命名空间允许你对混合进行分组，避免命名冲突。

#utils {
  .border-radius(@radius: 5px) {
    border-radius: @radius;
  }
  
  .box-shadow(@shadow: 0 2px 5px rgba(0,0,0,0.1)) {
    box-shadow: @shadow;
  }
}

.my-element {
  #utils > .border-radius(10px);
  #utils > .box-shadow(0 4px 10px rgba(0,0,0,0.2));
}

编译后的 CSS：

.my-element {
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

作用域（Scope）

Less 中的变量和混合遵循就近原则，先查找本地作用域，再查找父作用域。

@color: #000;

.header {
  @color: #fff;
  color: @color; // 使用 #fff
  
  .nav {
    color: @color; // 仍然使用 #fff，继承父级作用域
  }
}

.footer {
  color: @color; // 使用全局 #000
}

编译后的 CSS：

.header {
  color: #fff;
}
.header .nav {
  color: #fff;
}
.footer {
  color: #000;
}

导入（Import）

Less 允许你导入其他 Less 文件，这些文件会在编译时合并。

// variables.less
@primary-color: #3498db;
@font-size: 16px;

// mixins.less
.border-radius(@radius: 5px) {
  border-radius: @radius;
}

// main.less
@import "variables.less";
@import "mixins.less";

.button {
  color: @primary-color;
  font-size: @font-size;
  .border-radius(8px);
}

编译后的 CSS：

.button {
  color: #3498db;
  font-size: 16px;
  border-radius: 8px;
}

实际应用示例

构建响应式布局

@mobile: ~"(max-width: 767px)";
@tablet: ~"(min-width: 768px) and (max-width: 1023px)";
@desktop: ~"(min-width: 1024px)";

.container {
  width: 100%;
  margin: 0 auto;
  
  @media @mobile {
    padding: 10px;
  }
  
  @media @tablet {
    padding: 20px;
    max-width: 768px;
  }
  
  @media @desktop {
    padding: 30px;
    max-width: 1200px;
  }
}

编译后的 CSS：

.container {
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .container {
    padding: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding: 20px;
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    padding: 30px;
    max-width: 1200px;
  }
}

主题切换

// 主题变量
@themes: {
  light: {
    background: #ffffff;
    text: #333333;
    primary: #3498db;
  },
  dark: {
    background: #333333;
    text: #ffffff;
    primary: #5dade2;
  }
};

// 主题混合
.theme(@name) {
  @theme: @themes[@name];
  background-color: @theme[background];
  color: @theme[text];
  
  .button {
    background-color: @theme[primary];
    color: @theme[background];
  }
}

// 使用主题
.light-theme {
  .theme(light);
}

.dark-theme {
  .theme(dark);
}

编译后的 CSS：

.light-theme {
  background-color: #ffffff;
  color: #333333;
}
.light-theme .button {
  background-color: #3498db;
  color: #ffffff;
}
.dark-theme {
  background-color: #333333;
  color: #ffffff;
}
.dark-theme .button {
  background-color: #5dade2;
  color: #333333;
}

相关知识点

  • CSS 预处理器：Less、Sass、Stylus 等都是 CSS 预处理器，它们扩展了 CSS 的功能
  • CSS 变量：原生 CSS 也支持变量（使用 --variable-name 语法），但功能不如 Less 丰富
  • PostCSS：一个现代的 CSS 处理工具，可以配合 Less 使用，提供更强大的功能
  • 构建工具：Webpack、Gulp、Vite 等可以集成 Less 编译功能
  • BEM 命名规范：结合 Less 的嵌套功能，可以更好地实现 BEM 命名规范

更新日志

2025/11/4 05:39
查看所有更新日志
  • 133be-feat(docs): 添加CSS BEM规范、clamp函数和Less文档于
贡献者: ViewRoom