在基于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
时间: 2024-08-09 14:48:47