定制你的bootstrap之--修改less文件1

今天来聊聊定制你的bootstrap文件，换句话说就是修改css文件，大家知道bootstrap文件是有less书写的，好吧，我们从源头开始吧！

1、下载bootstrap源文件：

在bootstrap中文网上下载源码，不要选错呀。

2、解压后看到less文件夹，打开，找到variables.less文件，这个文件基本上存的都是变量；用sublime打开。

3、看到了从第4行开始：

4、我们今天就说这一段，基本的less语法，等说完了，再说如何解析成css文件。

• 第1,2,3行是注释，在less中，注释有2中，一种是css的格式注释，一种是//注释；

  区别1：/**/是多行注释 // 是单行注释

  区别2：/**/编译的时候写入css文件 //注释的不写入css文件

• @gray-base: #000; 定义一个变量@gray-base值为#000；

• @gray-darker: lighten(@gray-base, 13.5%); // #222

  定义一个变量@gray-darker 值是多少呢？

• 先看(@gray-base, 13.5%); 上面的变量

• @gray-base 是#000；16进制是 0；

• 0的13.5%，黑色的就是 22呀！

• 所以 lighten默认的就是#222；

• 整个是什么意思呢？ 就是@gray-darker的值为 lighten(@gray-base, 13.5%);，如果变量没有传参数，那么就是默认的222；如果传了参数，则为（@gray-base, 传入的参数）

• 我们在392行，可以看到“反色导航条”颜色定义的代码：

• 它的后面传了个参数为15%，值是多少你自己算算。

这样的好处是什么呢？

你想想，你在做一个项目的时候，客户今天说就定这个颜色了，过了几天，改了，换颜色了！

如果你用css写的，O(∩_∩)O~，你就挨个改吧。如果你用less写的，只需要修改一处，就可以了，分分钟的事！惬意吧！

今天就先说到这里，改天说说如何让less文件编译为css文件！