less學習之Bootstrap

less學習筆記之bootstrap

目錄說明

源代碼裏面的目錄是這樣的(只給出部分)：

.csscomb.json
│  .csslintrc
│  alerts.less
│  badges.less
│  bootstrap.less
│  breadcrumbs.less
│  button-groups.less
│  buttons.less
│  carousel.less
│  close.less
│  ...
│
└─mixins
    alerts.less
    background-variant.less
    border-radius.less
    buttons.less
    center-block.less
    clearfix.less
    forms.less
    gradients.less
    ...

文件 variables.less

顧名思義，爲整個Bootstrap定義的全局變量。

知識點一：
Less的做用域和css很類似，變量和混合（mixins）在當前文件沒法找到時會繼承父級做用，若是任然沒有找到則會編譯拋出異常。

定義在Bootstrap中使用的灰色和品牌顏色。

@gray-base:  #000;
@gray-darker:lighten(@gray-base, 13.5%);
@gray-dark:  lighten(@gray-base, 20%); 
@gray:   lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); 
@gray-lighter:   lighten(@gray-base, 93.5%); 

// 這部分定義的主要色：成功、失敗、警告等等。
@brand-primary:         darken(#428bca, 6.5%); // #337ab7
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

具體體現：

知識點2：函數 lighten與darken
描述： 參數：`color, amount, method`
功能： `color + amount` 表示在`color`的基礎上，
變得更淡或者更深,加上method後表示在`color * method` 的基礎上，變淡/深 amount，
這裏先不解釋less中色值是怎麼計算的。

以後也定義了默認背景色。

定義字體風格

字體大小定義

Bootstrap的基礎字體爲14px。

知識點3：函數ceil和floor
簡單說明：分別爲向上取整和向下取整

輸入框風格定義

cursor：not-allowed //當button與input處於disabled時，鼠標指針的樣式

優先級定義

設置一些默認層級優先級z-index，用於特定的組件，例如：navbar、dropdown、popover、modal-background、tooltip、navbar-fixed。值都爲1000+，這也就是有時候咱們本身自定義了一些優先級，可是仍是達不到效果，能夠想想是否是值不夠？

less的坑

在實際的運用less中，遇到的問題。
一、就是使用calc(100% - 50px)，發現有時候經過調試看到不是像本身寫的同樣，這時候須要使用~進行處理 如： calc(~"100% - 50px")(必定要用雙引號)。

二、在頁面調試的時候，有時候對顏色增長透明度或者其操做，獲得的色值不是#六位，而是#八位，對於#八位，在編譯後不必定可以正確展現在頁面，這個時候就須要使用less的函數fade。fade(#, n%).