标签: less

我不熟悉Less.在我的理解中,我认为Less可以将less格式文件转换为标准css文件(如果我错了,请纠正我).现在我有一个问题如下.

比如你会产生100个CSS类,如下面的(来自.span1于.span100在一个CSS文件).我想知道是否less可以像这样生成一个CSS文件？

...
.span5 {
  width: 5%;
}

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

我刚开始学习Less并希望得到这样的结果:

.navbar .nav > li > a {
   /* some rules */
} 

.navbar .nav > li > a:hover {
   /* some rules */
} 

.navbar .nav > li > a:focus {
   /* some rules */
}

我无法弄清楚如何在Less中写出来.我试过了

.navbar .nav > li > a {
    /* some rules */
    &:hover {

    }
    &:focus {

    }
}

但这不起作用.请帮忙.谢谢.

如何在bootstrap 3中制作流体容器？

在bootstrap 2.3.2 .container-fluid中有类.但现在在bootstrap 3中它缺失了,只有.container类.请帮我.

我想创建一个执行以下操作的函数:

.sprite-size (@width,@height,@x,@y) {
  width:~'@{width}px';
  height:~'@{height}px';
  background: @sprites no-repeat  -~'@{x}px' -~'@{y}px';
}

我想通过一个正数值,@x并且@y然后在输出否定他们.上面的LESS函数输出以下示例:

//LESS
.header-language-selection {
  .sprite-size(44,21,312,0);
}

//Outputs CSS
.header-language-selection {
  width: 44px;
  height: 21px;
  background: url('/Content/images/sprites.png') no-repeat - 312px - 0px;
}

如您所见,输出结果包含-和之间的空格px.有没有办法可以删除它并实现我想要的？

我希望该行的输出为: background: url('/Content/images/sprites.png') no-repeat -312px -0px;

在LESS中我可以应用这样的两个规则来影响隐藏下划线的链接的文本样式,除非悬停:

.read-more
{
    a
    {
        text-decoration:none;
    }
    a:hover
    {
        text-decoration:hover;
    }
}

但我觉得我也应该能够定义两个这样的规则:

.reverseHover
{
    text-decoration:none;
}

.reverseHover:hover
{
    text-decoration:hover;
}

然后使用a mixin来获得这两个规则:

.read-more{
    a
    {
        .reverseHover;
    }
}

无需明确地执行以下操作:

.read-more{
    a{
        .reverseHover;
    }
    a.reverseHover:hover
    {
        .reverseHover;
    }
}

那可能吗？

我注意到用SASS编写的inuit.css有一个.vendor混合:

@mixin vendor($property, $value...){
    -webkit-#{$property}:$value;
       -moz-#{$property}:$value;
        -ms-#{$property}:$value;
         -o-#{$property}:$value;
            #{$property}:$value;
}

有没有办法在LESS中复制一些奇怪的功能,如e()和@ {}？

---注意:转到EDITED 2部分进行总结----

我有一个ASP.NT MVC(4)应用程序.我集成了(twitter)Bootstrap.Bootstrap工作正常,但是当我发布应用程序时,图标无法正确显示.

我试图重新发布应用程序但没有成功.

为了澄清我在下面放了一些图片.

当我从VS2013运行我的应用程序时,结果就是这样(这没关系):

在展台,IE和Chrome.

但是当我运行已发布的应用程序时,结果是这样的(这不是正常的):

• 铬

• IE(10)

不知何故,这个问题与评估的CSS有关,但我不知道这可能发生在哪一点.

本地应用程序中评估的css是这样的(可以):

• 铬

• IE

但在已发布的应用程序中我有这个(这不是正常的):

• 铬:

• IE:

有些人经历过这种行为吗？

我能做些什么来解决这个奇怪的问题？

--------------------------- EDITED ---------------------- --------

我得到(字体文件.eot,.svg,.ttf和.woff)要发布我的应用程序时包括在内.当我访问默认页面(应用程序根目录http://localhost/)时,这是显示图标的页面,Chrome的"开发者工具网络"选项卡中显示的文件是:

在包含文件之前,我收到文件的404错误,所以我猜他们会继续被请求,即使它们没有显示在网络选项卡中.

但是,图标显示不正确.

------------------------ EDITED 2 ------------------------ ---

好吧,我在IIS 7中重新启动我的站点.请求开始被触发.这些是Chrome开发者工具网络标签中显示的文件请求:

然后resquest正在寻找文件:/Content/themes/fonts/但它们在:/Content/themes/base/fonts/

该base文件夹包含一个包含bootstrap文件的bootstrap.css文件夹.在CSS文件中有这个类参考字体文件:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

似乎对字体文件的引用很好,因为文件树是这样的:

我可以将课程改为:

@font-face {
      font-family: 'Glyphicons Halflings';
      src: …

Less允许选择父选择器(http://lesscss.org/features/#parent-selectors-feature)

如何获得直接父选择器,而不是根父选择器？

我正努力让咕噜咕噜地做点什么.我的项目看起来像这样:

/app
    /assets
        /components
        /stylesheets
            /less
                /file1.less
                /file2.less
                /file3.less
                /importAll.less
            /css

我想这样,当file1,file2或file3保存在importAll.less文件编译成CSS和投入/css/style.css.这是我得到的.

less: {
    development: {
        options: {
            paths: ["./assets/stylesheets/less"],
            yuicompress: true
        },
        files: {
            "./assets/stylesheets/css/style.css": "./assets/stylesheets/less/importAll.less"
        }
    }
}

我不确定如何让文件观察者工作.

我以前使用Bootstrap 3.0,并从bootstrap编译我的CSS少文件+我自己的一些文件.

在这里我的一些类采用了一些这样的引导样式:

.myClass{
    .col-md-3;
    border: 1px solid #000;
    [etc, etc]
}

它在Bootstrap 3.0中表现很好,因为所有col-md-X类都定义为较少的变量.但是在Bootstrap 3.1中,这似乎被某个名为make-grid-columns()的mixin函数所取代.

有谁知道如何利用这个mixin,以及如何将上面的构造移植到Bootstrap 3.1中？: - /