css - 将 LESS 嵌套 CSS 转换为标准 CSS

Question

我需要帮助尝试将此 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;
    }
}

score 10 · Accepted Answer

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

佩卡是对的。如果您有一个 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 的祖父

还有许多其他工具……适用于 Mac，适用于 Win 和 Multi

score 6 · Accepted Answer

LESS 的全部意义在于您编写 LESS 样式的 CSS，LESS 解释器将其转换为普通 CSS。

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

简单的。

score 4 · Accepted Answer

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

score 3 · Accepted Answer

3

你可以使用LessJS 转换器

于 2011-11-01T14:34:46.593 回答

score 1 · Accepted Answer

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

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

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

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

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

rel="stylesheet/less".

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

score 1 · Accepted Answer

使用 Simpless检查将 Less 转换为 CSS

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

希望对你有很大帮助。。

css - 将 LESS 嵌套 CSS 转换为标准 CSS

6 回答 6

Related

Reference