我記錄的less

Less是什麼

再說less以前,先說一下你們都知道的css;css做爲撐起前端領域的3大基石之一,他的一舉一動都是時刻牽動着開發者們的當心臟,css和html同樣,都是一種標記性語言,並不像js那樣具備邏輯性,並且每當有新的特性出來的時候,必定繞不過兼容問題;在一個就是重複性及其惱火,一樣的一個類似樣式在一個頁面可能要寫幾回甚至十來次,簡直是一種折磨,一樣的還有一些難以記憶的色彩,每次可能都要找很久才能找到你上一次寫的那個色號;因此就涌現了一些有趣的預編譯語言,less就是其中一個佼佼者.

神奇的預編譯語言

什麼是預編譯語言呢,就個人理解就是一種瀏覽器不能直接識別語言,瀏覽器只html,js,css,因此一些特殊的語言須要通過編譯處理才能被瀏覽器識別;

Sass(scss)

誕生於2007年,基於ruby,因此使用sass(scss)的話須要先裝上ruby.sass和scss這兩個十分類似,在百度上搜索scss 下面的第一個倒是sass,說的簡單的能夠理解scss是sass的一個升級版本，徹底兼容sass以前的功能，又有了些新增能力,在語法上有些出入.

Stylus

誕生於2010年,來源於node社區的一款預編譯語言,跟sass有些相近

Less

誕生於2009年,受Sass的影響建立的一個開源項目。 Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
Less 能夠運行在 Node 或瀏覽器端。（引用於官網）。

蘿蔔青菜

蘿蔔青菜,各有所愛,市面上的css預處理語言不少,上面3個只是其中一部分,在選擇上也是有點兒糾結的,就我的而言,雖然sass和stylus在功能上要比less強,可是說到學習時間和成本那確定是less最優的,只要會css.那麼就能夠在很短事件裏面瞭解掌握less經常使用精華部分了,掌握這些就足以應對平常工做中所須要的狀況了;

Less經常使用

仍是上面那句話,less的功能不少,可是其實咱們只須要掌握其中最經常使用的那部分就足以應對工做中的問題了;

變量

less的變量跟通常語言的變量沒什麼區別,主要用在一些十分重複的值上,比方色彩,路徑;

語法

定義: @變量名:變量值;
使用: 屬性: @變量

常見場景

色號使用

@grey-text:grey;
 div{
     color:@grey-text; //不須要加""
 }
 //編譯以後獲得:
 div{
     color:grey;
 }

這主要用在頁面上的一些色號上,每次都重複複製一個色號,並且有時候代碼多了又要翻上去找那個色號,讓人心煩(☄ฺ◣ω◢)☄ฺ,之後就能夠在頁面頂部先定義好頁面上重複次數多的色號,方便使用;

文件路徑

這個主要重在背景圖或者其餘一些有路徑文件的處理上;比方依據起點項目的文件目錄來講,給一個div設置背景圖是這樣路徑

div1{
    background-image:url(../../images/web3.0/xx/xxx.png);
}
div2{
    background-image:url(../../images/web3.0/aa/aaa.png);
}

寫多了感受想吐,((유∀유|||)) ,在起點項目裏面都是這樣的目錄,雖然說這個文件目錄不會輕易更改,可是保不許那一天變動了就慘了,如今有了less的變量咱們就能夠這樣

//1,先在less文件頂部定義好全局路徑,就是前面那一段重複的
@base-url:"../../images/web3.0/";//加上了引號
//2,而後使用
div1{
    background-image:url("@{base-url}xx/xxx.png");
}
div2{
    background-image:url("@{base-url}aa/aaa.png");//這裏也加上了引號,而且使用大括號包裹
}
//之後即便項目路徑變動了咱們只須要改最上面的@base-url就能夠一次性所有更改了;

好吧,上面的這個文件路徑加不加引號還有些奇怪的地方;舉個例子

@base-url:img/; //這裏沒加引號
@base-url-l:"../../qidianv3.0/assets/images/web3.0/";  //加上了引號
@bg-img:background-image; //把屬性名當作變量存放也是能夠的

.lessa{
    width: 200px;
    height: 200px;
    @{bg-img}:url('@{base-url}bg.png');
}
.lessd{
    width: 200px;
    height: 200px;
    @{bg-img}:url("@{base-url-l}banner@2x.png");

上面兩個都獲得了正常編譯,可是第二個(@base-url-l的屬性值)若是不加引號卻會出錯,獲得NameError: variable @base-url-l is undefined的報錯,這點讓人在乎;難道是單節的能夠不加,多節的就必定要加嘛?算了..保險起見都加上吧;

屬性名定義

上面提到的變量定義還可定義屬性名,我以爲這個用在那些較長的屬性名上是個不錯的注意

background-attachment: fixed;//背景圖較小時候是否跟隨內部元素滾動,取值:scroll fixed;
//background-attachmen夠長,也很差記憶,把他存下來
@bgFixed:background-attachment;
div{
    @{bgFixed}:fixed;
}
//編譯獲得
div{
    background-attachment:fixed;
}

可是其實這個我以爲用處不大,由於sublime安裝Emmet css3等插件以後只須要記得這個屬性的幾個字母就能夠提示了,要敲的單詞說不定要比自定義的還要少,並且時間更加省;┐(￣ヘ￣)┌,比方上面這個我只須要敲"batf",就能夠獲得background-attachment:fixed了;

總結:我以爲這個變量仍是主要用在色彩和資源路徑實用

計算

這個計算仍是很管用的,並且很強大

寬高計算

一個頗有用處的計算屬性,他能夠直接對經常使用的屬性值(數字屬性)進行四則運算,一樣,新提出的css也增長了相似的calc()計算屬性;
**加減法時 以第一個數據的單位爲基準
乘除法時 注意單位必定要統一**
解釋下第一條,第二條注意一下單位就好:

下面紅塊區域

.main{
    height: 100% - 40px;
    border:1px solid red;
}
//最後編譯出來
.main {
    height: 60%;
    border: 1px solid red;
}

能夠看到,最後他獲得了60%;他是把40px當作40%來處理的,這就是上面說的加減法時 以第一個數據的單位爲基準;
如今咱們來對比一下css3的calc()的計算結果

.main{
    height:calc( 100% - 40px);
    border:1px solid red;
}
//最後編譯出來,(編譯個毛線啊,這自己就是原生css啊喂ヽ(｀Д´)ﾉ︵ ┻━┻ ┻━┻ )
.main {
    height: calc(100% - 40px);
    border: 1px solid red;
}

能夠看到明顯對比,下面的本身佔據了剩下全部空間,他沒有忽視單位的存在,而是真的如同咱們想的進行計算,因此從這一點看來明顯是calc()要聰明一些;

色彩計算

這個東西挺有趣的,色彩還能夠計算;

@bgcolor:#CB9898; //定義色彩
.main{
    height: calc(100% - 40px);
    box-sizing: border-box;
    border:1px solid red;
    background-color:@bgcolor+#111; //背景色計算
}

;

//編譯獲得
.main{
    height: calc(100% - 40px);
    box-sizing: border-box;
    border: 1px solid red;
    background-color: #dca9a9;//渲染結果
}

仍是上面那個圖,能夠看到背景色最後渲染成爲了#dca9a9;這個計算過程也很簡單,首先把#CB9898換成rgb獲得203,152,152,
再把#111換成rgb獲得 17,17,17 最後兩個rgb對應相加,獲得 220,169,169 化成hex就是#dca9a9了;
而後咱們看看calc支持這東西嗎?

emm..ヽ(￣▽￣)ﾉ無效的屬性值,這一點看來仍是less更加厲害;
那麼這一點用在什麼地方更加合適呢?畢竟人腦不是電腦,不可能心算出hex->rgb在相加,除非是那種很簡單的#111+#222=#333的這種,因此我暫時也還沒找到這東西的使用場景;
總結:因此兩種計算方式不存在誰好誰壞的說法,關鍵看使用場景,就我的來講,外面的佈局上用calc比較好,而裏面的子元素之間的明確寬高關係仍是用less的計算方法,畢竟每一次都要寫calc()仍是挺討厭的,不是嗎?

嵌套

這個我以爲是less裏面最好用的功能之一了,由於他會造成一種相似做用域的東西,全部的屬性或者變量值都只在這個範圍生效,能夠在必定程度上減輕css交叉引用時相同class所帶來的影響,極大程度減輕了咱們寫css選擇器的煩躁感(￣▽￣)／

嵌套規則

.alread-selectd{
    margin-top: 36px;
        .alread-selectd-head{
            display: flex;
            .alread-selectd-title{
                font-weight: bold;
                &+span{
                    .MIX-font(14px,#999);
                }
            }
        }
    }
    
//編譯獲得
.alread-selectd {
  margin-top: 36px;
}
.alread-selectd .alread-selectd-head {
  display: flex;
}
.alread-selectd .alread-selectd-head .alread-selectd-title {
  font-weight: bold;
}
.alread-selectd .alread-selectd-head .alread-selectd-title + span {
  font-size: 14px;
  color: #999;
}

做用域

//做用域(或者說就近原則)
@font-color:pink;//全局定義
.main{
    @font-color:red; //重定義
    color:@font-color;
    .in{
        @font-color:blue;  //重定義
        color:@font-color;
    }
}
.footer{
    @font-color:green;  //重定義
    color:@font-color;
}
.mask{
    color:@font-color; //全局定義
}

;
因此簡單的說,這個做用域其實也就是個就近原則,他會去找距離本身最近的那個變量,指導最外層;

"&"的用處

&符號表明的就是當前選擇器,他用在本身的特定class(或者說狀態下)和僞類:after:before是至關有用的;
咱們常常會用到當鼠標點擊的時候去切換某個元素的樣式,這時候只須要像這樣

div{
    background-color:black;
    &.active{
        background-color:red;
    }
}
//而後在點擊的時候加上active這個calss就好
//僞類使用
div{
    color:red;
    &:after{
        content:"i'm cute,so please give me money!!"
    }
}

媒體查詢器的嵌套

媒體查詢器不用寫到外面去了,媒體查詢器一樣能夠嵌套在規則層級裏面了,只是按照通常習慣,咱們會把全部的要根據媒體查詢器來寫的樣式放在一個媒體查詢器裏面,而這個卻會每個樣式都單獨生成一個媒體查詢區;

div{
    width:300px;
    @media screen and (min-width: 320px) and (max-width: 1200px){
        width:100px;
    }
}
//最後獲得
div{
  background-color: pink;
}
@media screen and (min-width: 320px) and (max-width: 1200px){
  div{
    background-color: grey;
  }
}

混合

這也是less裏面十分有用的東西,混合(mixture)其實就是一堆預約義的樣式的集合;咱們能夠把一些常常會出現的,一些固定寫法抽出來集合在一起,而後使用的時候很方便的就能夠調用了;

不帶參數的混合

.MIX-center{ //這是一個常常用到的讓元素內部水平垂直居中的東西;
    display:flex;
    align-items: center;
    justify-content: center;
}
div{
    .MIX-center;//亦能夠寫成.MIX-center();
}

帶參數的混合

咱們可能常常會寫這種按鈕,若是來一個寫一個那真的是一種折磨,如今有了less咱們能夠這樣

.MIX-btn(@width,@height,@font-size,@color,@bdr-color){ //使用混合,把樣式都寫出來;
    width: @width;
    height: @height;
    font-size: @font-size;
    line-height:@height;
    text-align: center;
    border-radius: @height;
    color:@color;
    border:1px solid @bdr-color;
    text-decoration: none;
}
//而後,咱們這樣使用
button{
    .MIX-btn(100px,30px, 12px, #333,black);
    display: inline-block;
}

//實際編譯獲得
button{
    width: 100px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    border-radius: 30px;
    color: #333;
    border: 1px solid black;
    text-decoration: none;
    display: inline-block;
}

之後遇到這種按鈕就能夠直接調用.MIX-btn(),依次傳入參數就行了;

默認參數的混合

混合參數在指定的時候能夠帶上默認值,若是不給,那麼他就採用默認值

.MIX-border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:1px solid  @color;
    box-shadow: @arguments;//指代的是 所有參數
}
div{
    .MIX-border();
}
//獲得
div{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

這種混合我的而言不合適用在具體數字不少的時候,由於頁面中這些數字不多有同樣的,難以作到通吃,這種數字值不少的狀況你還不如就放個變量名,而後全部的值都手動傳入更好;因此他適合用在一些'變更很少的常見套路'上
比方第一個裏面的居中,可是咱們有時候只會在x上居中,在y上則是從交叉軸起點對齊,比方左邊是圓形頭像,右邊是我的信息,或者其餘的什麼對齊方式;因此定死的混合就不大合適;可是每次調用的時候咱們都去傳參數也是麻煩,畢竟大部分時候咱們用flex居中是最多見的;咱們這時候採用這種帶參數的默認居中混合

.MIX-center(@x:center,@y:center){ //不要加'';
    display:flex;
    align-items: @y;
    justify-content:@x;
}
.div{ //傳入了參數他就用你指定的參數
    .MIX-center(@y:flex-start); //注意傳參方式
}
.div1{
    .MIX-center(); //不給就默認(song)(｀・ω・´);
}
//獲得
.div{
    display:flex;
    align-items: @flex-start;//採用咱們的設定值
    justify-content:center; //默認值
}

這樣是否是感受好得多了?

混合的命名空間

有些奇怪複雜的使用方式,來一段官網的介紹:

有時候，你可能爲了更好組織CSS或者單純是爲了更好的封裝，將一些變量或者混合模塊打包起來, 你能夠像下面這樣在.space中定義一些屬性集以後能夠重複使用:

.MIX-space{
    .base{
        width: 200px;
        height: 200px;
    }
    .color{
        color:red;
        .bgcolor{
            background-color: grey;
        }
    }
    .border{
        border: 1px solid black;
    }
}
//0,直接調用父層
.space{
    .MIX-space(); //啥都沒有
}
//1, 調用直系子層
.space{
    .MIX-space .base();//只有寬高生效
}
//2, 調用直系子層
.space{
    .MIX-space .border();//只有邊框生效
}
//3, 有爺爺級,跨級調用孫子層
.space{
    .MIX-space .bgcolor();//NameError: .MIX-space.bgcolor is undefined;
}
//4, 調用直系子層(含本身子層)
.space{
    .MIX-space .color(); //只生效字體紅色
}
//5, 連續調用
.space{
    .MIX-space>.color>.bgcolor() //生效灰色
}
//6, 子層以及子層調用
.space{
    .MIX-space .color();
    .MIX-space>.color>.bgcolor(); //注意這種用法,不能寫成 .MIX-space>.color()>.bgcolor();
}
//7, 多屬性調用
.space{
    .MIX-space .base();
    .MIX-space .border();//寬高邊框生效
}
// 8, (沒有爺爺),越過父層跳躍調用
.space{
    .color(); //NameError: .color is undefined
}

因此從上面的幾個例子能夠看出這東西的意義和用法了;他和通常的混合有些不同,感受更像是其餘語言的對象,普通混合是一旦調用,那麼就會把這個混合裏面全部的樣式屬性所有應用進去,儘管有時候咱們只想要其中一兩個;而混合空間則知足了這個須要,你能夠在一個複雜的命名空間裏面去挑選你須要的幾個屬性來使用
其中有幾個點須要注意一下
1,直接調用父層是不會如同咱們想象的那樣去自動包含他下面的子層樣式,只會獲得他本身身上的樣式,假如他上面沒有任何樣式,那麼你將什麼也得不到(0);
2,混合命名空間是絕對禁止直接調用子層或者孫子層的,第一步必定是把混合空間引入,這樣才"有混可調" (8);
2,調用以前必須先調用父層,直接調用子層會獲得未定義 (3);
3,須要哪些樣式就調用哪些樣式,調了幾個你就要寫幾個,千萬別忘了第一點;
4,孫層前面的父層不要加();
關於混合的一些寫法建議:
1,混合不必定用'.'開頭,也能夠用'#',因此看起來就像通常的class選擇器和id選擇器
2,寫混合的時候建議在前面加上MIX-用做識別,這樣作有個好處,能夠避免和通常class,id混淆;
3,儘管混合在調用的時候有時候能夠不加(),可是建議仍是一直加上吧,把他想一想成爲函數吧,想着函數調用不帶()那是否是很難受?

繼承

繼承,less的僞類,很明顯,意思就是本身(僞類,本身,那麼就聯想到'&:')從指定的地方去繼承樣式(又是一個充滿玄學的東西٩(º﹃º٩));
先看一個簡單例子

.outer{
    background-color:aliceblue;
}
div{
    &:extend(.outer)//繼承不用加();
}
//渲染獲得
div{
    background-color:aliceblue;
}

繼承就基本而言就是這樣使用;可是他也有一些注意的點;如今咱們以上面的命名空間爲被繼承者,看一兩個小東西就明白了
你要開心咱們能夠叫他爸爸(●￣(ｴ)￣●);兒子從爸爸那兒繼承很正常不是

.MIX-space{
    .base{
        width: 200px;
        height: 200px;
    }
    .color{
        color:red;
        .bgcolor{
            background-color: grey;
        }
    }
    .border{
        border: 1px solid black;
    }
}
//1,繼承父
.extend{
    &:extend(.MIX-space)
}
//編譯獲得
.extend{
    //啥都沒獲得
}
//2,層級調用
.extend{
    &:extend(.MIX-space .color);
}
//編譯獲得
.extend{
    color: red;
}
//3,多個繼承
.extend{
    &:extend(.MIX-space .color); 
    &:extend(.MIX-space .color .bgcolor); 
}
//編譯獲得
.MIX-space .color,.extend { //注意這個選擇器的變化
  color: red;
}
.MIX-space .color .bgcolor,.extend { //注意這個選擇器的變化
  background-color: grey;
}
//跨級繼承
.extend{
    &:extend(.color); 
}
//獲得警告 extend ' .color' has no matches

從上面幾個例子能夠看出,繼承和命名空間的使用規則實際上是基本一致的,只是他不須要調用加括號而已;另外值得注意一點的是繼承者在編譯出來以後他獲得的選擇器會變成'父,繼承者'這樣的形式,在一個就是繼承編譯出來的並不會在一個大括號裏面,這就像上面的嵌套媒體查詢器了!

@import 引入

@import引入,這東西在css裏面其實也有,做用其實也差很少,都是在一個css裏面去引入另外一個css,可是二者的功能性倒是差的不少;假設在一個頁面裏面,我想要使用bootstrap的btn樣式,可是我又不想把整個bootstrap所有引入,那麼這時候咱們能夠這樣作

@import "../bootstrap-3.3.7/less/variables.less"; //注意着兩個東西,這是bootstrap的全局變量定義,一些基本單位(顏色,字體大小,padding,margin以內的)都在這個less文件裏面
@import "../bootstrap-3.3.7/less/mixins.less"; //全部的混合樣式,這兩個都必須放在最前面,且必須引入
@import "../bootstrap-3.3.7/less/buttons.less";

<button type="button" class="abtn btn-info">按鈕</button>

//使用
.abtn{
    &:extend(.btn);
}
.table{
    &:extend(.table);
}

](https://static.qidianla.com/1...;
能夠看到他就有了基本樣式,而後咱們再來看看這個文件大小
;
;
至於上面提到的兩個less是有這樣的描述

bootstrap.less做用是將其餘less文件所有引入，可是引入的順序仍是有要求的。好比先引入 variables.less 和 mixins.less，是由於後面的less文件用到的less特性都是來自於這兩個文件的，若是不先引入，就會出現編譯錯誤的問題。而後再引入 reset.less 重置原有的樣式。接着引入網格系統的相關文件，這是整個網格系統創建的關鍵所在。而後引入一些公用的組件，特定組件，最後就是一些無家可歸可是比較有用的樣式樣式文件：utilities.less。

less裏面的@import引入能夠附帶多個參數,這幾個參數的意義和做用目前還有摸透是幾個意思

指令	含義
reference	使用文件，但不會輸出其內容（即，文件做爲樣式庫使用）
inline	對文件的內容不做任何處理，直接輸出
less	不管文件的擴展名是什麼，都將做爲LESS文件被輸出
css	不管文件的擴展名是什麼，都將做爲CSS文件被輸出
once	文件僅被導入一次 （這也是默認行爲）
multiple	文件能夠被導入屢次
optional	當文件不存在時，繼續編譯（即，該文件是可選的）

色彩函數

好吧,這東西有涉及到一些色彩上的專業知識,原諒我只曉得個rgba; ╮(・o・)╭ 因此仍是找個平時用得上的東西來講
有時候可能拿到個hex,可是明顯這東西還有個透明度通道,那就只有轉成rgb,在加個a了...難受...香菇,
而less提供幾個好用方法使用

.lighten{
    height: 100px;
    width: 100px;
    background-color: fadeout(#4e5b7a, 40%); //fadeout函數
}
//編譯獲得
.lighten {
    height: 100px;
    width: 100px;
    background-color: rgba(78, 91, 122, 0.6); //上面是淡出值,因此實際應該獲得0.6;
}
//其餘兩個應該用獲得的
mix(@color1, @color2,weight);//混合2個不一樣的顏色,第三個參數爲alpha值,默認50%;
fade(@color,alpha) //就是直接設置透明度
fadein(@color,alpha) //其實就是很fadeout相反啦

色彩函數裏面還有幾個看起來很複雜的東西,涉及到什麼hsla,hsv,色彩空間,色彩通道什麼的...看不懂看不懂ﾍ(* – -)ﾉ

免編譯

還記得上面的計算屬性嘛?提到在less中使用calc()會被同一單位計算處理掉,可是這很危險,因此我咱們要讓less知道這東西你不去動他;
使用 ~''(波浪符號加單引號)這樣的格式

div{
    width:~'calc(100% - 80px)'
}
//編譯獲得
div{
    width: calc(100% - 80px);
}

這樣就能夠避免一些重要的東西被錯誤編譯了

註釋

最後縮一下注釋吧
CSS 形式的註釋在 LESS 中是依然保留的
Less文件中

Css文件中:

//註釋

好吧...關於less的基本用法差很少就是上面這些了,後續再補充吧(滑稽)