标签: less

我已经安装了font-awesome 4.0.3图标npm install.

如果我需要从节点模块中使用它我应该如何在html文件中使用它？

如果我需要编辑less文件,我需要在节点模块中编辑吗？

我想使用Twitter Bootstrap,但仅限于特定元素,因此我需要找出一种方法来为所有Twitter Bootstrap类添加前缀,或者使用less mixins.我对此没有经验,所以我不太明白该怎么做.这是我尝试设计样式的HTML示例:

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

在这个例子中,Twitter Bootstrap将是正常的样式h1,但是我想更加选择性地应用Twitter Bootstrap样式的哪些区域.

我正在使用LESS来改进我的CSS并尝试在类中嵌套一个类.有一个相当复杂的层次结构但由于某种原因我的嵌套不起作用.我有这个:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

我无法.g.posted上班.它只显示了.g一点.如果我这样做,那很好:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

我想窝.posted在里面.g.有任何想法吗？

我将从百分比到像素计算某个元素的宽度,因此我将使用LESS和calc()减去-10px .这是可能的？

div {
    span {
        width:calc(100% - 10px);
    }
}

我使用CSS3 calc()所以它不起作用:calc(100% - 10px)

示例:如果100%= 500px,则宽度= 490px(500-10);

我做了一个测试演示:http://jsfiddle.net/4DujZ/55/

所以padding会说:5(10px/2),当我调整大小时.

我能做到这一点在LESS？我知道如何在jQuery和简单的CSS像保证金填充或做别的......但我会努力做到功能在LESS与calc()

SASS有一个叫做的功能@extend,允许选择器继承另一个选择器的属性,但不复制属性(如mixins).

LESS也有这个功能吗？

我刚开始使用Twitter Bootstrap,这是一个问题.

我正在创建自定义<header>块,我希望它的底角是圆形的.

是否有任何"正确"的方法通过使用预定义的类来执行此操作,或者我必须手动指定它:

border-radius: 10px;               // and all that cross-browser trumpery

现在,我正在使用css样式.也许这个问题会更好用less吗？

在一些css类中使用less来为不同的分辨率包装css样式会很不错.

我想做点什么:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

最后这样的结果应该是结果:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet可能看起来像这样:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

希望有人有个好主意!

在VS <= 2015中,我们可以使用WebEssentials扩展,负责为我们编译less/sass文件,但目前它不支持VS 2017.您是否知道类似的扩展可以编译更少/ sass在构建？

我一直在调查,因为我认为花一些时间来学习定制Bootstrap的最佳实践是值得的.

我可以看到有一个友好的页面可以从http://twitter.github.io/bootstrap/customize.html中有选择地自定义元素,但是我希望在不触及原始引导源文件的情况下获得更多的控制权.

首先,我基本上想测试将网格从12列更改为16列,为此,我创建了自己的变量less文件并添加了@gridColumns:16; 仅对此文件并在bootstrap.less中导入此自定义较少,如下所示.

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

然后,使用WinLess编译bootstrap.less文件以获取带有重写变量导入调用的新bootstrap.css,并将css与html文件链接,但网格不会更改为16列.

任何人都可以指出我做错了什么？

我使用less.css来简化我的CSS样式.我想在一个较少的文件中声明一个变量,并在我更少的文件中共享它的用法.这可能吗？例如:

english.less

@languageFloat:left;

chart.less

div#footer a.web
{   
    display: block;
    float: @languageFloat;
    color: #cccccc;
    margin-right: 10px;
}