Less的特性介绍

Less的基本概念

Less是一种动态样式语言，它扩展了CSS的功能，为CSS赋予了变量、混合（Mixins）、函数等特性。Less可以运行在客户端或服务器端，最终会被编译成标准的CSS代码。与原生CSS相比，Less让样式表的编写更加高效和可维护。

// 定义变量
@primary-color: #428bca;
@padding: 15px;

// 使用变量
.header {
  background-color: @primary-color;
  padding: @padding;
}

变量特性

Less中的变量使用@符号定义，可以存储颜色、尺寸、字体等任何CSS值。变量让样式更易于维护和修改，特别适合主题定制和全局样式调整。

// 颜色变量
@brand-primary: #337ab7;
@brand-success: #5cb85c;
@brand-info: #5bc0de;

// 尺寸变量
@navbar-height: 50px;
@sidebar-width: 250px;

// 使用示例
.navbar {
  height: @navbar-height;
  background-color: @brand-primary;
}

.alert-success {
  background-color: @brand-success;
}

变量还支持运算：

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

嵌套规则

Less允许选择器嵌套，这更符合HTML的结构，使代码更加清晰易读。

.nav {
  background: #333;
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
    
    a {
      color: white;
      text-decoration: none;
      padding: 5px 10px;
      
      &:hover {
        background: #111;
      }
    }
  }
}

编译后的CSS：

.nav {
  background: #333;
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  display: inline-block;
}
.nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
}
.nav li a:hover {
  background: #111;
}

混合(Mixins)

混合是Less中非常强大的功能，它允许将一组CSS属性从一个规则集包含到另一个规则集中。

// 定义混合
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

// 使用混合
#menu a {
  color: #111;
  .bordered;
}

.post {
  padding: 10px;
  .bordered;
}

混合也可以带参数：

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

.button {
  .rounded-corners();
}

.avatar {
  .rounded-corners(50%);
}

运算功能

Less支持加减乘除等数学运算，颜色和数值都可以参与运算。

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

.container {
  width: 100% / 2 + @filler;
  color: #888 / 4;
  background-color: @base-color + #111;
  height: 100px - 30px;
}

颜色运算示例：

@color: #224488;

.element {
  color: @color + #333; // 结果为 #5577bb
  background-color: @color * 0.5; // 结果为 #112244
  border-color: fade(@color, 50%); // 透明度50%
}

函数功能

Less内置了大量函数用于颜色处理、字符串操作和数学运算等。

@color: #80e619;

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

.sidebar {
  width: percentage(0.5); // 50%
  height: round(100.8px); // 101px
  margin: sqrt(25px); // 5px
}

命名空间和访问器

Less支持将混合组合在一起形成命名空间，便于组织代码。

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

// 使用命名空间中的混合
.header a {
  color: orange;
  #bundle > .button;
}

作用域

Less中的作用域与编程语言类似，变量和混合首先在本地查找，如果找不到则向父作用域查找。

@var: red;

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

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

导入指令

Less支持文件导入，可以更好地组织样式代码。

// 导入其他Less文件
@import "variables.less";
@import "mixins.less";
@import "reset.css"; // 也可以导入CSS文件

导入时可以指定选项：

@import (reference) "base.less"; // 只引用，不输出
@import (inline) "non-less.css"; // 内联包含不处理
@import (less) "custom.css"; // 当作Less处理

条件语句

Less支持基本的条件判断，通过when关键字实现。

.mixin(@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
  background-color: white;
}

.box {
  .mixin(#ddd); // 背景为黑色
}

循环结构

Less通过递归混合实现循环功能。

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1)); // 递归调用
  width: (10px * @counter); // 生成样式
}

.item {
  .loop(5); // 生成5个宽度样式
}

输出结果：

.item {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

字符串插值

Less支持在属性名和选择器中使用变量。

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

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

媒体查询嵌套

Less允许媒体查询嵌套在选择器中，使代码更加模块化。

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

颜色函数

Less提供了丰富的颜色处理函数，包括亮度调整、饱和度调整、色调旋转等。

@color: #f36;

.color-demo {
  color: @color;
  background: spin(@color, 120); // 色调旋转120度
  border-color: desaturate(@color, 30%); // 降低饱和度30%
  outline-color: lighten(@color, 20%); // 亮度增加20%
}

避免编译

有时需要输出一些Less不处理的CSS值，可以使用~""语法。

.class {
  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
  width: calc(~"100% - 50px");
}

JavaScript表达式

Less支持在样式表中使用JavaScript表达式，这在某些计算场景下非常有用。

@var: `"hello".toUpperCase() + '!'`;

.header:after {
  content: @var; // 输出 "HELLO!"
  color: `colorToHex('red')`; // 使用自定义JS函数
}