twitter-bootstrap 如何开始使用 LESS 自定义 Bootstrap 3？

How do I get started with customizing Bootstrap 3 with LESS?

提问by Daryll Santos

I've just downloaded Bootstrap 3 from https://github.com/twbs/bootstrap. I'm watching this tutorial: http://www.youtube.com/watch?v=I6EPArp4csA. How exactly do I get started with modifying the LESS files?

我刚刚从https://github.com/twbs/bootstrap下载了 Bootstrap 3 。我正在观看本教程：http: //www.youtube.com/watch?v=I6EPArp4csA。我究竟如何开始修改 LESS 文件？

What I did was to copy these directories: LESS, dist/css dist/fonts dist/js and create my new project. The current project folder looks like this:

我所做的是复制这些目录：LESS、dist/css dist/fonts dist/js 并创建我的新项目。当前项目文件夹如下所示：

css
less
js
index.html

with the HTML file having this at the top:

与顶部的 HTML 文件：

<link rel="stylesheet/less" type="text/css" href="less/my_site.less"/> //only contains @import "bootstrap.less";
<script src="js/less.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Now when I try to modify one of the variables in variables.less and compile it with SimpLESS there's a Syntax Error: carousel.less. What gives? When I comment out "carousel.less", another problem pops up with dropdown.less. So maybe it has something to do with the mixins? Anybody have an idea on how I get started on moving on with this?

现在，当我尝试修改 variables.less 中的一个变量并使用 SimpLESS 编译它时，会出现语法错误：carousel.less。是什么赋予了？当我注释掉“carousel.less”时，dropdown.less 会弹出另一个问题。所以也许它与mixin有关？任何人都知道我如何开始着手处理这个问题？

采纳答案by AJ Meyghani

Edit: Jan 14, 2015

编辑：2015 年 1 月 14 日

Using gulp

使用吞咽

1. Make sure you have node installed from nodejs.org

   1.1: Own /usr/localso you can run npm commands without sudo:

   sudo chown -R `whoami` /usr/local

2. Install gulp globally: npm install gulp -g

3. Make a folder on desktop and go to it: cd ~/Desktop && mkdir boot-gulp && cd $_.
4. Initiate the project manifest: npm initand accept the defaults.
5. Install gulp and gulp-less: npm install gulp gulp-less.
6. Make a file called gulpfile.jsand paste the following in that file:

1. 确保你已经从 nodejs.org 安装了节点

   1.1：拥有/usr/local这样你就可以在没有 sudo 的情况下运行 npm 命令：

   sudo chown -R `whoami` /usr/local

2. 全局安装 gulp： npm install gulp -g

3. 在桌面上创建一个文件夹并转到它：cd ~/Desktop && mkdir boot-gulp && cd $_.
4. 启动项目清单：npm init并接受默认值。
5. 安装 gulp 和 gulp-less: npm install gulp gulp-less.
6. 创建一个名为的文件gulpfile.js并将以下内容粘贴到该文件中：

gulpfile.js

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("less", function() {
   gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
});

1. Install bower globally: npm install bower -g
2. Install bootstrap with bower: bower install bootstrap
3. Make the less/main.lessfile and load bootstrap.less:

7. 全局安装 bower： npm install bower -g
8. 使用 bower 安装引导程序： bower install bootstrap
9. 制作less/main.less文件并加载bootstrap.less：

less/main.less

less/main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...

1. Run gulp lessand you should see the output in the css folder.

10. 运行gulp less，您应该会在 css 文件夹中看到输出。

Adding watch

添加手表

1. Add the gulp-watchplugin: npm install gulp-watch
2. Update gulpfile.jsto watch any less file and automatically compile to css:

11. 添加gulp-watch插件：npm install gulp-watch
12. 更新gulpfile.js以观察任何较少的文件并自动编译为 css：

gulpfile.js

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");
var watch = require("gulp-watch"); //+

gulp.task("less", function() {
  watch("less/**/*.less", function(){ //+
    gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
  }); //+
});

Now run gulp less. It is now watching all the less files in the lessfolder. Make a change and save any file in the lessfolder, and you should see the output automatically in the cssfolder.

现在运行gulp less。它现在正在监视文件less夹中的所有 less 文件。进行更改并将任何文件保存在less文件夹中，您应该会自动在css文件夹中看到输出。

EDIT: Jan 1, 2014

编辑：2014 年 1 月 1 日

Give Koalaa try. It compiles your LESS files real-time. It is free and cross-platform. You might also want to take a look at this FAQ about compiling Bootstrap with Koala.

给考拉一试。它实时编译您的 LESS 文件。它是免费且跨平台的。您可能还想查看有关使用 Koala 编译 Bootstrap 的常见问题解答。

Original Answer

原答案

I reproduced your problem with the app you mentioned. I tried another app such as crunch appand it worked fine. So with crunch, just drag and drop the bootstrap.lessfile into that app and click on crunch filebutton on the top right corner of the app. Then it will ask you where to save it. I personally use the command line tool assets-packager (npm install -g assets-packager). I hope that helped.

我用你提到的应用程序重现了你的问题。我尝试了另一个应用程序，例如crunch 应用程序，它运行良好。因此，使用 crunch，只需将bootstrap.less文件拖放到该应用程序中，然后单击应用程序右上角的crunch file按钮即可。然后它会问你在哪里保存它。我个人使用命令行工具 assets-packager ( npm install -g assets-packager)。我希望这有帮助。

回答by S.Philip

These are some of the better tutorial I could find about Bootstrap 3 Less Workflow.

这些是我能找到的关于 Bootstrap 3 Less Workflow 的一些更好的教程。

1. http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
2. http://bootstrap.lesscss.ru/less.html

1. http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
2. http://bootstrap.lesscss.ru/less.html

And if you want to learn Less, you can refer these links

如果你想学习 Less，你可以参考这些链接

1. http://lesscss.org(the official less website)
2. http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial
3. http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

1. http://lesscss.org（官方less网站）
2. http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial
3. http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

Hope this helps.

希望这可以帮助。

回答by Facundo Colombier

if you have a php server, just install lessphp:

如果你有一个 php 服务器，只需安装lessphp：

lessphp

少php

and then add this to your first line:

然后将其添加到您的第一行：

<?php
    require "lessc.inc.php";
    $less = new lessc;
    $less->checkedCompile("stylesheet.less", "stylesheet.css");
?>

and all you have to do is work with your less file and php will do the rest =')

你所要做的就是处理你的 less 文件，php 会做剩下的 =')