将 LESS 嵌套 CSS 转换为标准 CSS答案

【问题标题】：Convert LESS nested CSS to standard CSS将 LESS 嵌套 CSS 转换为标准 CSS
【发布时间】：2013-03-23 20:57:29
【问题描述】：

我需要帮助尝试将此 LESS 嵌套 CSS 转换为标准 CSS。有人可以帮忙吗？

.leftNav {
    a.TopLevel {
        float:none;
    }

    ul#topnav {
        > li {
            float:none;
            height: 2em;
            margin: 2px;
            background-color: rgb(1,64,117);
            border: 1px solid rgb(1,64,117);

                color: #fff;
            border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0.03, rgb(30,94,147)),  color-stop(0.99, rgb(1,64,117)) );
            background: -moz-linear-gradient(center top,  rgb(30,94,147) 3%, rgb(1,64,117) 99% );
        }

        > li .sub {
            left:120px;
            top: 0px;
        }

        > li > h2 > a {
            color: #fff;
        }

        > li:hover > h2 > a, > li > h2 > a:hover, li > h2 > a:focus, a.TopLevel.active, a.TopLevel.active:hover {
            background-position: top left;
            color: #bbb;
        }

        li:hover {

        }
    }

    #topNavContainer {
        position:absolute;
        left: 17px;
        top: 100px;
    }

    .headertable, .wrapper {
        margin-left: 120px;
    }
}

【问题讨论】：

为什么不通过 LESS 运行它？
是的，语法是lessc styles.less

标签： css less

【解决方案1】：

您也可以使用lessphp 或less.js。

Pekka 是对的。如果您有一个 LESS 样式（*.less 文件），也认为您有一个 LESS 解析器（原始 ruby gem 或 PHP-Classes 之一，甚至是 less.js JavaScript 库）及其主要目的是将LESS解析（转换）为CSS。

更新

WinLESS - (Windows) 非常简单的 GUI。它看起来像它使用 less.js 不知何故（我个人的选择）
SimpleLESS - (Multiplarform) 另一个 GUI。工作也很好
LessAPP - (Mac) 我认为它是第一个用于编译 *.less WinLESS 和 SinpleLESS 的祖父的桌面工具之一

There're many other tools...适用于 Mac，适用于 Win 和 Multi

【讨论】：

【解决方案2】：

LESS 的重点在于您编写 LESS 样式的 CSS，LESS 解释器将其转换为普通 CSS。

因此，只需通过 LESS 运行您的 LESS 代码，您将获得等效的普通 CSS。

简单。

【讨论】：

【解决方案3】：

使用firebug，在CSS选项卡中，您可以看到使用LESS在css中生成的结果是什么。

【讨论】：

【解决方案4】：

你可以使用LessJS Converter

【讨论】：

【解决方案5】：

查看Convert Less to CSS with Simpless

SimpLESS 是您易于使用的 LESS CSS 编译器。

希望对你有很大帮助..

【讨论】：

【解决方案6】：

这是使用 Less 的最简单方法：

创建 style.css 文件
创建 style.less 文件

在 index.php 中链接到这些文件：

<link rel="stylesheet" href="style.css">
<link rel="stylesheet/less" type="text/css" href="style.less">

请注意，要链接到 less，您应该以 /less 结束 rel=""：

rel="stylesheet/less".

下载http://winless.org/
将您的项目文件夹拖到此程序中，它会将您的 less 文件转换为 css。

【讨论】：