标签: less

Visual Studio 2013非常棒,现在具有语法高亮和.less文件自动完成功能.但它是否也会生成相应的CSS文件？我需要为此安装其他扩展吗？

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

1. 为什么不用display:block？
2. 另外,为什么它也适用于::before伪类？

我使用的是LESS样式语言.

考虑以下CSS:

.side-bg
{
    background:url(../img/layout/side-bg.jpg) top no-repeat;    
}

现在我的所有图像都在../img/我希望能够将变量设置为图像路径的文件夹中,并像这样使用它:

@image-path: ../img;

.side-bg
{
    background:url(@image-path/layout/side-bg.jpg) top no-repeat;   
}

但这不起作用.它不是一个大问题,如果图像文件夹发生变化,我总是可以使用查找和替换.我刚刚开始学习LESS,并想知道这样的事情是否可行.

你们如何对使用Less/Sass构建的CSS进行维护？

我喜欢Dev Tools/Firebug的一个方面就是能够看到css样式的行号.除了必须手动搜索.less/.scss文件以找到我想要修改的代码之外,还有一种很好的方法可以使用CSS预处理器吗？

有没有办法在less ~运算符中使用变量,比如

~"calc(70% - @spacing)";

当我尝试它时,它只适用于静态值,如

 ~"calc(70% - 10px)";

我可以在设置为属性之前获取要评估的字符串.

我注意到less.js在firefox中工作但在Chrome中没有,或者是因为我犯了错误？

<link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

即使我尝试html { background: red; }它仍然无法在chrome中工作我在某处犯了错误？

我正在尝试在我的机器上安装LESS并且已经安装了节点.但是,当我输入"node install -g less"时,我收到以下错误,不知道该怎么办？

FPaulMAC:bin paul$ npm install -g less
npm ERR! Error: EACCES, unlink '/usr/local/lib/node_modules/less'
npm ERR!  { [Error: EACCES, unlink '/usr/local/lib/node_modules/less']
npm ERR!   errno: 3,
npm ERR!   code: 'EACCES',
npm ERR!   path: '/usr/local/lib/node_modules/less' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! System Darwin 13.3.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "less"
npm ERR! cwd /usr/local/bin
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! path /usr/local/lib/node_modules/less
npm …

我正在寻找某种if语句来控制background-color不同的div元素.

我已经尝试了下面的内容,但它没有编译

@debug: true;

header {
  background-color: (yellow) when (@debug = true);
  #title {
      background-color: (orange) when (@debug = true);
  }
}

article {
  background-color: (red) when (@debug = true);
}

我正在尝试使用MVC4捆绑来对一些较少的文件进行分组,但看起来我正在使用的导入路径已关闭.我的目录结构是:

static/
    less/
        mixins.less
        admin/
            user.less

在user.less中,我正在尝试使用以下方法导入mixins.less:

@import "../mixins.less";

这曾经在我使用chirpy和无点之前为我工作,但现在我注意到ELMAH对我生气,说:

System.IO.FileNotFoundException: 
    You are importing a file ending in .less that cannot be found.
File name: '../mixins.less'

我应该@import和MVC4 使用不同的吗？

一些额外的信息

这是我用来尝试这个的较少的类和global.asax.cs代码:

LessMinify.cs

...
public class LessMinify : CssMinify
{
    public LessMinify() {}

    public override void Process(BundleContext context, BundleResponse response)
    {
        response.Content = Less.Parse(response.Content);
        base.Process(context, response);
    }
}
...

Global.asax.cs

...
DynamicFolderBundle lessFB = 
    new DynamicFolderBundle("less", new LessMinify(), "*.less");

BundleTable.Bundles.Add(lessFB);

Bundle AdminLess = new Bundle("~/AdminLessBundle", new LessMinify());
...
AdminLess.AddFile("~/static/less/admin/user.less");
BundleTable.Bundles.Add(AdminLess); …

SASS有Compass(社区维护的sass mixins /方法库).

LESS有没有可以与Compass比较的支持库？列出任何内容都会有帮助!