Less is Less-优快云博客

本文深入探讨了Less预处理器的基本语法、插值、变量、混入、类继承、避免编译等核心概念，并通过实例展示了其在实际项目中的高级应用，帮助开发者更高效地进行CSS代码管理和维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量

@color:red;
@font-size:14px;

h1{
    color:@color;
    font-size:@font-size;
}

@happy:red;
@life:'happy';

h1{
    color:@@life;
}

解析为：

h1{
    color:red;
}

插值

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

解析为：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

高级应用：

@images: "../img";

body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

作用域

变量使用之前不需要定义
变量从当前作用域一直往上找，直到到根
变量在同一个作用域里声明多次，使用最后一个（类似css覆盖）

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
    .inner{
        val:@var;
    }
  }
  one: @var;
}

解析为：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}
.class .brass .inner {
  val: 3;
}

混入(类)

一些属性的集合

无参

.mod{
    border-radius:5px;
}

.header{
    .mod;//.mod()
}

有参

单参

.mod(@radius){
    border-radius:@radius;
}

多参（推荐分号）

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

逗号和分号混合使用时，以分号作为分隔符，逗号的参数作为一组

.name(1, 2, 3; something, else)//2个参数

.name(1, 2, 3)//三个参数

.name(1, 2, 3;)//一个参数

有参带默认值

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

带选择器

.mod{
    &:hover{
        color:#fff;
    }
    .active{
        color:red;
    }
}

若一个类不想被解析到css文件里:

.mod(){
    border-radius:5px;
}

类调用时，圆括号在无参，有参带默认值时可选

调用时给类添加 !important，类中所有的属性都会加上 !important

多个参数时，可以使用逗号，分号隔开，建议用分号

arguments

.transition (@moveStyle :all;@delayTime : 4s;@moveType : ease-in; @moveTime : 2s){
    -webkit-transition: @arguments;    
    -moz-transition: @arguments;    
    -o-transition: @arguments;    
    -ms-transition: @arguments;    
    transition: @arguments;    
}

继承(1.4.0)

.demo{
  color:red;
  font-size:19px;
}
div{
  &:extend(.demo);
  background-color: #red;
}

解析为：

.demo,
div {
  color: red;
  font-size: 19px;
}
div {
  background-color: #red;
}

避免编译

.class {
  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* 实际上会输出下面的代码: */
.class {
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

div{
    color:red~"\9\0"
}

div{
    color:red\9\0
}

javascript的表达式

@string: `'iwjw'.toUpperCase()`; //IWJW