简单的LESS Tutorial

最新推荐文章于 2025-08-15 10:51:23 发布

原创最新推荐文章于 2025-08-15 10:51:23 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less #stylesheet #前端开发 #css #tutorial

本文详细介绍了LESS作为CSS的扩展语言，如何让CSS文件逻辑更清晰，易于维护和更新。同时，提供了LESS的应用方式，包括直接和间接应用LESS文件，并通过实例展示了LESS在代码缩写、变量使用、伪选择器和动态CSS选择器等方面的强大功能。

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

1. 什么是LESS?

LESS是一种动态的CSS语言，更专业的称呼是CSS preprocessor。作为CSS的扩展语言，LESS可以让CSS文件逻辑上更清晰，从而更容易维护和更新。LESS是开源的，诞生于2009年，采用javascript开发, LESS深受另外一种动态CSS语言SASS/SCSS的影响(SCSS是SASS的升级版) 。相对于SASS/SCSS或者其他CSS preprocessor, LESS的典型特征有两个，

支持实时编译，例如网页或者应用可以直接应用less文件，通过嵌入less.js，browser支持less实时编译成css文件，并完成rendering
支持纯CSS

2. 如何应用LESS?

在实际的开发中，可以有两种应用LESS的方式，直接应用LESS和间接应用LESS。如果选择直接应用LESS文件，则需要在相应的页面嵌入less.js, 浏览器会实时的把LESS文件编译为CSS文件并进行渲染，即页面中需要包含下面的代码，

    	<link rel="stylesheet/less" type="text/css" href="styles.less" />
    	
    	<script  src="less.js"  type="text/javascript"></script>

如果选择间接的方式，则需要预先把LESS编译成CSS文件。

很多编辑器都有LESS的插件提供，例如笔者最喜欢的前端开发利器brackets上有一个插件LESS Auto Compile，在保存less文件的时候，这个插件能自动编译生成对应的css文件，不过需要在less文件开始插入如下的代码，

//out:./test.css,compress:false,stricMath:true

在IDE开发工具Netbeans上也有类似的功能提供。

在Ubuntu系统上，你可以安装LESS, 安装命令如下：

sudo npm install -g less

注意：LESS是运行在node中的，因此ubuntu系统中需要预先安装node.js

Ubuntu系统中编译less文件的命令如下：

lessc styles.less > styles.css

3. LESS的四个典型应用案例

3.1 Netsting

LESS代码如下：

    .small-1 {

        display: block;

        zoom: 1;

        .test {

            font-size: 0;

            height: 0;

        }

    }

编译完成对应的CSS代码如下：

    .small-1 {

      display: block;

      zoom: 1;

    }

    .small-1 .test {

      font-size: 0;

      height: 0;

    }

3.2 Variable

LESS代码如下：

    	@images: "../img"; 

    	 body { 

    	    color: #444; 

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

    	}

编译完成对应的CSS代码如下：

    body { 

      color: #444; 

      background: url("../img/white-sand.png"); 

    }

3.3 Pseudo Selector

LESS代码如下：

    .small-1{

        display: block;

        zoom: 1;

        &:after,&:before {

            content: " ";

            display: block;

            font-size: 0;

        }

    }

编译完成对应的CSS代码如下：

    .small-1,

    {

      display: block;

      zoom: 1;

    }

    .small-1:after,

    .small-1:before,

    {

      content: " ";

      display: block;

      font-size: 0;

    }

注意less中的 & 指的是parent selector, 在本例中指.small-1

3.4 Dynamic CSS Selector

LESS代码如下：

    .grid-gen(3);

     .grid-gen(@n,@i:1) when (@i =<@n) {

        .small-block-grid-@{i} {

            width: (@i *100% /@n);
    
        }

        .grid-gen(@n,(@i + 1));

    }

编译完成对应的CSS代码如下：

    .small-block-grid-1 {

      width: 33.33333333%;

    }

    .small-block-grid-2 {

      width: 66.66666667%;

    }

    .small-block-grid-3 {

      width: 100%;

    }