如何在前端项目中引用bootstrap less？

　　在基于bootstrap css框架的前端项目开发中，如果有grunt build系统，那么工作流是：客制化less，在less中定义自己的

CSS，同时可以随意引用bootstrap中预定义好的css类，一旦保存文件，grunt则开始重新构建，生成最后的生产文件。问题是：

如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢？

比如：我如何能够实现在屏幕尺寸在@screen-md时，将所有的图片隐藏呢？

对于这个场景，假设项目目录结构如下：

> bower_components

  > bootstrap

  > font-awesome

  > requirejs

  ...

> css

  - project.css

  > less

    - project.less

    - variables.less

可行的办法为：

1.在project.less中import bootstrap.less，font-awsome,以及自己定义的项目所需less文件：

// Bootstrap framework

@import "../../bower_components/bootstrap/less/bootstrap.less";

// Font-awesome awesomeness

@import "../../bower_components/font-awesome/less/font-awesome.less";

// Project specific stuff

@import "variables.less";

@import "stuff.less";

2.在variables.less文件中一方面定义自己的所需变量，另一方面可以覆盖掉bootstrap的预置变量；

// Override Bootstrap variables

@font-family-sans-serif:  "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;

@btn-default-border: #bbb;

@brand-primary: #b02b2c;

@link-color: #08c;

// Override Font-Awesome variables (path relative to project.css position)

@fa-font-path: "../bower_components/font-awesome/fonts";

//Map Bootstrap variables to myproject specific names

@my-customname-float-breakpoint: @grid-float-breakpoint;

@theme-color: @brand-primary;

//Project specific variables

@my-favourite-color: rgb(228, 1, 1);

3.仅仅编译project.less文件，最后生成一个包罗万象的巨大css文件（注意这里也包含font-awsome）

4.既然在project.less中已经引入了bootstrap.less，那么在后面import的自创less文件自然可以引用任何bootstrap less变量或mixin,比如：

// Hide all images at a viewport smaller than 992px (aka @screen-md)

@media (max-width: @screen-sm-max) {

    img {

        display: none;

    }

}

原文出处：

http://stackoverflow.com/questions/20246514/using-twitter-bootstrap-3-during-development

http://transmission.vehikl.com/using-bootstrap-as-a-semantic-mixin-library/

http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

http://slicejack.com/bootstrap-with-less-workflow/

https://www.npmjs.com/package/grunt-include-bootstrap

http://stackoverflow.com/questions/12655034/how-to-use-bootstrap-and-less-and-keep-a-clean-project

巴特西

如何在前端项目中引用bootstrap less？

最新文章

热门文章