Css编译之Less入门

关注

原创最新推荐文章于 2026-08-20 07:52:28 发布 5.9k 阅读 AI 写同款· GEO 优化 ›

Python LESS编译器lesscpy：从LESS到CSS的转换本文还有配套的精品资源，点击获取简介：LESS，作为一种CSS预处理器，通过增加变量、嵌套规则等功能，提高了CSS的可读性和可维护性。 lesscpy 是一个Python库，它将LESS代码转换成标准的CSS，帮助Python开发者在自己的环境中处理样式。此编译器支持动态编译和错误处理，并允许开发者自定义输出CSS的格式。安装简单，通过pip即可开始使用。其... 阅读详情

为什么要有预处理CSS?

css写起来比较费事，而且代码难以维护 , 后来，就有了让CSS加入一些编程的元素，像其他程序语言一样可以做一些预定的处理，这就是 CSS预处理器( CSS Preprocessor )

less.js的工作原理：是内部先用Ajax请求less文件(遍历网页上的具有rel=stylesheet/less属性的文件)，然后按照自己的语法解析，生成对应的CSS然后加在页面中。

注意事项：
1. 先引入我们自己编写的less文件
2. 再引入我们的less.js文件
3. 但是我们在生产环境下，我们引入页面的是css,而非less文件，因为如果让css在浏览器端编译，那么会使浏览器端响应变慢，这种是不可取的，所以我们都是编写好less文件后，在本地编译成css文件，最后引入页面。

下面来看下less的一些基础的东西

变量的定义

使用 @+变量名的方式来定义一个变量

举例：

// 定义变量
@containerWidth: 1200px; 
@border:1px solid #000;
// 使用变量
.con{
   width: @containerWidth;
   border:@border;
}

注释

在Less 中也可以有注释，分为单行注释，和多行注释。

单行注释：

// 单行注释 ,注 less 在编译过程中会忽略掉。

多行注释：

/*!
* 也可不用叹号，叹号的作用，不会再压缩的时候被去除。用于声明版权。
*/

嵌套语法

嵌套的作用是后代嵌套，如果需要直接子代嵌套，那么我们需要使用&代表父元素格式为 &>子元素{}& 在一个作用域中只能用一次，不能这样写 &>& ，因为&只有一次，&后面是没有&。

举例：

@containerWidth: 1200px; 
// 正确的嵌套和&用法
.con{
    width:@containerWidth;
    ul{
        width:200px;
        p{
            width:100px;
            a{
                color:#f40;
                &:hover{
                    color:blue;
                }
            }
        }
    }
}

// 正确使用 &
.box{
    // li 是 .box 的直接子代
    & > li{
        color:#fff;
    }
    // p 是 .box 是后面的兄弟元素
    & + p{
        color:red;
    }
    // div 是 .box 的后代 div
    div{
        color:blue;
    }
}

// 错误的使用&
.box{
    ul{
        // 此处&代表的是ul,但是ul后面的ul不能这样表示，&一次只能表示一次。不知道这样表述对不对...
        & + &{ 
            width:100px;
        }
    }
}

Minin 混合

像函数一样来传递参数，如果没有传参，则按照定义的默认的来。

示例：

// 定义一个类
.roundedCorners(@radius:5px;){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}

// 应用一个类
#header{
    .roundedCorners(10px);
}
#footer{
    .roundedCorners;
}

Import 导入

less 支持多个其他的less文件的导入一个less文件。我们约定以_为开头的文件，是可以被导入的。

示例：

// 在主less文件中 导入其他三个less文件， 举例如下：
@import url('_other1.less');
@import url('_other2.less');
@import url('_other3.less');

函数

内置函数
- lighten ：将一个颜色变亮
  示例： lighten(#000 ,10%) ; // rgb 三个值都是0 ，都增多10% (255的10%,四舍五入，26 ，转换成16进制：就变成了1a1a1a)。在bootstrap定制的时候，能够看到这种函数。
- 更多函数： http://lesscss.cn/functions/

更多内容，移步至：

less 中文网学习地址： http://lesscss.cn/
更多阅读： http://www.1024i.com/demo/less/