一、LESS是什么?
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
中文介绍:http://lesscss.cn/
有JS基础的同学应该很快就能掌握LESS
二、准备工作,在一个bootstrap项目中使用LESS。
上面的网站介绍了LESS的多种入门方法,这里主要以npm+webstorm 为例:在本地项目中使用LESS生成CSS 通过LESS的语言特性减少编写和维护的难度;
解压npm 得到如下文件:
在webstrom中需要使用LESS的项目里做如下设置: (地址为 lessc.cmd 的绝对路径)
打开bootstarp的 LESS文件夹 将所有文件复制到webstorm: 如下
我们需要注意的是bootstrap.less 和 variables.less 这两个文件
三、合并所有样式:
HTML部分仅仅剩下一个 CSS LINK
index.css文件 由index.less文件直接编译生成
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link rel="icon" href="img/favicon.ico"> <!--<link href="css/bootstrap.css" rel="stylesheet">--> <link rel="stylesheet" href="css/index.css"> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head>
index.less部分如下:
@import "bootstrap.less"; //*************在自定义less文件中引入 bootstrap.less文件 body { font-family: 'SimHei'; margin-top: 60px; } .logo { display: inline-block; width: 63px; height: 42px; background-image: url("../img/hdr-spr.png"); background-position: 0 -512px; background-repeat: no-repeat; margin-top: -12px; }
我们通过一个index.less文件 生成了一个本地的indes.css文件
四、给bootstrap瘦身,删除在项目中没有使用的的bootstrap样式。
通过上面的观察 我们发现bootstrap的CSS是有无数个less文件组合编译而成的,观察如下bootstrap.less文件:
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins //*******************用双斜杠注释掉不需要的样式************************//
@import "variables.less";
@import "mixins.less";
// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
// Core CSS
@import "scaffolding.less"; //脚手架
@import "type.less";
@import "code.less";
@import "grid.less";
//@import "tables.less"; //表格
@import "forms.less";
@import "buttons.less";
// Components
@import "component-animations.less";
@import "dropdowns.less";
//@import "button-groups.less";
//@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
//@import "breadcrumbs.less";
//@import "pagination.less";
//@import "pager.less";
//@import "labels.less";
//@import "badges.less";
//@import "jumbotron.less";
//@import "thumbnails.less";
//@import "alerts.less";
//@import "progress-bars.less";
@import "media.less";
//@import "list-group.less";
//@import "panels.less";
@import "responsive-embed.less";
//@import "wells.less";
@import "close.less";
// Components w/ JavaScript
@import "modals.less";
//@import "tooltip.less";
//@import "popovers.less";
//@import "carousel.less";
// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";
最后 我们通过一个index.less文件 生成了一个本地的indes.css文件 原本近7000行的bootstrap.css代码在与本地css代码合并后 只有不到5000行
五、添加或修改variables.less中的预定义变量,对bootstrap进行粗粒度的修改
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@intel-blue: #0071c5;
@blue-light: #0082d6;
@blue-lighter: #00adef;
@blue-std: @intel-blue;
@blue-dark: #0062a9;
@blue-darker: #015291; //阴影
比如在colors:模块中定义了 项目所需要的几种颜色 “@变量名”
并作出如下修改: 修改了dropdown的几个预定义颜色 使用“//”注释的方法 这里不推荐直接删除
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
@dropdown-bg: @blue-std;//#fff;
//** Dropdown menu `border-color`.
@dropdown-border: rgba(0,0,0,.15);
//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #ccc;
//** Divider color for between dropdown items.
@dropdown-divider-bg: #fff;//#e5e5e5;
//** Dropdown link text color.
@dropdown-link-color: #fff;//@gray-dark;
//** Hover color for dropdown links.
@dropdown-link-hover-color: @blue-lighter;//darken(@gray-dark, 5%);
//** Hover background for dropdown links.
@dropdown-link-hover-bg: @blue-std;//#f5f5f5;
仅仅是一些简单的变量修改,就让你的bootstrap更加契合你的项目。
六、深度定制 bootstrap
bootstrap中的每个组件都是独立不受影响的
深度定制即修改各组件的LESS文件
每个LESS都是可以修改的
尽量通过“@”方法来声明并储存的预定义样式(颜色 尺寸...)
然后通过修改预定义变量值来改变整个样式 。
最终通过LESS +BOOTSTARP的部分组(比如栅格系统)件来实现任何页面的编写