我怎样才能使用LESSCSS变量定义Twitter的引导的CSS?(How can I custom

2019-07-04 22:01发布

我想自定义Twitter的引导的CSS不改变引导代码的本地副本*所以,我已经克隆了Twitter的引导项目到一个文件夹和它自己的文件夹中有我的应用程序的代码:

/html
    /bootstrap
       ...etc...
       /js
       /less
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

在我的“style.less”文件中,我定义了一个少一些变量,然后包括引导文件:

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

由于LESSCSS变量是真正的常数 ,我很惊讶,我@sansFontFamily是没有得到回升,当我编译LESS文件到CSS: lessc style.less > MyApp.css --yui-compress

所以...我缺少什么? 为什么我的变量被引导的LESS文件中定义的变量覆盖?

* -我已签出“ Twitter的引导定制最佳实践 ”,但想想趁着常数的将是一个更好的方法(如果我能得到它的工作)。

Answer 1:

正确的做法是先导入引导资产, 然后以较少的变量定义自定义值。 因此,考虑到问题的目录结构:

如果您使用引导2.x版本:

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

如果您使用引导3.x版本:

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";

/* custom settings that deviate from Bootstrap's default values */
@font-family-sans-serif: Trebuchet MS, Tahoma, sans-serif, Arial;
@font-size-base: 11px;
@line-height-base: 18px;

变量的完整列表可在variables.less找到文件。



Answer 2:

PeterVR的建议移动下面的引导@import声明自定义变量声明,根据这里的文档是正确的http://lesscss.org/#-variables 。 此规定:

当定义两次变量,变量最后定义被使用,从当前范围向上搜索。 例如:

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

编译为:

.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

(示例代码编辑 - 有一对夫妇在他们的版本错别字!)

所以我猜编制序列是一样的东西:

  1. 处理所有@imports构建的更少的代码的单个块
  2. 通过更少的代码走,并收集了所有的变量声明(每范围块)
  3. 任何变量声明值替换具有相同名称的任何先前的实例(每范围块)
  4. 替换变量占位符与变量值

这可以解释为什么值.class1 .class { three: 3,即使它在之前宣布@var: 3; 宣言。



Answer 3:

您好,我从随机的互联网搜索更好的办法

http://ollomedia.com/using-twitter-bootstrap-the-right-way/

示例源代码,请下载并结帐

http://ollomedia.com/wp-content/uploads/sample.zip


Answer 4:

我做了类似的事情最近,我发现最好的办法是创造我自己的“variables_override.less”和bootstrap.less和responsive.less进口标准variables.less 导入此。 然后编译这两个文件作为正常的变量将覆盖引导默认

这种方法不涉及对矫正bootsrap.less和responsive.less但在一个很小的方式



文章来源: How can I customize Twitter Bootstrap's CSS using LESSCSS variables?