本節書摘來自華章出版社《bootstrap開發精解:原理、技術、工具及最佳實踐》一書中的第2章,第2.5節,作者[美] 亞拉文·謝諾伊(aravind shenoy)烏爾裡希·索松(ulrich sossou),更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視
如果我們要快速地實作一些東西,或者隻是稍微修改一下bootstrap,那麼添加自己的樣式表就已經足夠了。如果要對bootstrap進行較大的定制,就必須使用未編譯的bootstrap源代碼。bootstrap的css源代碼是用less編寫的,使用了一些變量和mixin,使得我們可以輕松地實作定制。
less是一個開源的css預處理程式,具有非常優良的特性,可以提升我們的開發速度。less使得我們的工作變得高效率和子產品化,可以更加輕松地對項目中的css樣式進行維護。
在less中使用變量的好處很多,我們可以多次重用相同的代碼,進而實作一次編寫,随處使用。這些變量還可以進行全局聲明,這樣就可以在一個專門的地方指定變量的值。如果這些值需要改變的話,隻要更新一次就行了。
less變量還允許我們在一個單獨的檔案中指定一些被廣泛使用的值,比如顔色、字型系列和大小等。是以,我們隻要修改一個單獨的變量,它的變化将在所有使用到該變量的bootstrap元件上反映出來。例如,如果我們要将body元素的背景色修改為綠色(綠色的十六進制值是#00ff00),隻要對bootstrap中一個名為@body-bg的變量值進行修改就可以了,代碼如下:

mixin的作用與變量類似,但它針對的是整個類。mixin允許我們将一個類的屬性嵌入到另一個類中,使得我們可以将多行代碼一起放在一個組中,進而可以在整個樣式表中多次使用。mixin也可以搭配變量和函數一起使用,進而實作多重繼承。例如,如果我們要為一篇文章添加clearfix,可以使用表2-1左列顯示的.clearfix mixin,它相當于表2-1右列中顯示的已編譯css代碼中包含的所有clearfix聲明。
clearfix mixin可以讓元素自動地清除它後面的東西, 這樣就不需要添加額外的标記。它通常隻是在浮動布局中使用,在這種布局中元素将會被水準浮動堆放。