Question

我对使用css预处理器感兴趣并且倾向于LESS。我很擅长自己编写CSS，但想要利用一些动态功能。我并不认为在生产中添加不断的额外步骤（比如编译）是值得的。但是，这是值得的。

我喜欢LESS，因为我可以使用less.js来编译客户端（仅在开发期间），是否有一个工具可以自动检测我的less文件的时间戳并将其编译为css并覆盖当前css文件？我喜欢达到这种透明度，所以我可以担心代码，而不是编译它和刷新...类似于http://cssrefresh.frebsite.nl/但是将编译器与它结合起来？如果没有，是否有人有兴趣帮助建立它？

Answer 1

如果源已更改，Less.js已经重新编译 - 我从未遇到过在开发过程中过时的问题。我最终切换到使用textmate的较少捆绑的编译保存工作流程，虽然wince在部署和测试变得烦人之前切换出链接标签。

话虽如此，我确信你可以连接一些东西来观察磁盘上的文件并调用node.js lessc编译器。

更新清除DEV循环：

在开发过程中，我在页面中包含less.js文件，并通过styles.less链接到我的<link rel="stylesheet/less" type="text/css" href="styles.less>文件

当我推出制作时，我将其改为：

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

但是，在开发过程中，每次保存styles.less文件时，我都会使用TextMate包来编译styles.css文件，因此更改是在我的注释/取消注释的问题源文件。

我将bundle设置为使用带有--compress set的node.js lessc编译器，因此它为您提供了一个很好的紧凑样式表。

Answer 2

这个简单的功能可以做到：

less.autoRefresh = function(time)
{
    var sheets = [];
    for(var i = less.sheets.length; i--; )
        sheets.push(less.sheets[i].href);
    setInterval(
        function() 
        {
            for(var i = sheets.length; i--; )
                less.sheets[i].href = sheets[i] + '?'+Math.random();

            less.refresh(1);
        }, 
        time || 1000
    );

    var fnImport = less.tree.Import;
    less.tree.Import = function(path, imports)
    {
        path.value += '?x='+Math.random();
        fnImport(path, imports);
    }
}
less.autoRefresh(2000);

每2000毫秒刷新一次文件就越少。它不会检查标题等...但应该在开发环境中进行。

Answer 3

有SimpLess（免费，适用于Linux，Mac，Windows），我自己没有使用它，但我期待在不久的将来将它与我的工作流程集成。< / p>

少见＆amp;自动CSS缓存

3 个答案: