【Less】Less基本用法總結

一、介紹

Less 是一門 CSS 預處理語言，它擴充套件了 CSS 語言，增加了變數、Mixin、函式等特性，使 CSS 更易維護和擴充套件。
中文網址: http://lesscss.cn/

二、特點

1、寫樣式更簡單：巢狀
2、使用方便：變數、運算、函式
3、學習成本低：語法

三、語法

1、變數

變數宣告

@color:#adf;
@height:100px;
//1. 變數宣告
header{
    background-color:@color;
    height:@height;
}

• 變數名稱要求： 字母、數字、下劃線、中橫線
• 首字母可以為數字，可以為純數字
• 區分大小寫
• 變數值隨意

變數差值

將一個變數的值作為選擇器

@section:#section;
@{section}{
    height:400px;
    background:#ede;
}

變數拼接

@one:section;
@two:footer;
@s:~'@{one},@{two}';
@{s}{
    background:#999;
}

2、運算

header{
    height:100px+200px;
}
section{
    height:100px*2%;  // 200px; 
    // 如果都有單位，則使用第一個作為單位
    width:900/33px;   //27.2727px;
    // 如果只有一個有單位，則使用該單位
}

3、巢狀

less 支援巢狀書寫形式

（1）普通巢狀

#app{
	#header{
        // 子孫元素
		.logo{		
		}
		// 子元素
		>.search{
		
		}
        // 後邊緊挨著的元素
        + div{
            
        }        
        &:hover{
            
        }
        &::before{
            
        }
	}
}

（2）媒體查詢

.left{
    height:500px;
    background-color:#adb;
    // >=1200
    @media screen and(min-width:1200px) {
       background:#6e4848; 
    }
    // >=1200,<=900
    @media screen and(max-width:1200px) and (min-width:900px){
        background:#baa; 
    }
    //<900
    @media screen and (max-width:900px){
        background:#abd; 
    }
}

（3）變數作用域

變數只能在當前程式碼段和下層程式碼段使用。

4、混合 mixins

將需要重複使用的程式碼封裝到一個類中,在需要使用的地方呼叫。

.class #id

（1）普通混合

.font_h{
    color: red;
}
h1{
    font-size:28px;
    .font_h;
}

（2）不帶輸出混合

不輸出選擇器的單獨樣式設定

.float_left{
    content:".";
    display:block;
    clear:both;     
}

#box1{
    float_left();
}

（3）引數混合

// 定義混合
.border(@border_color){
    border:2px solid @border_color;
}
// 使用混合
.div{
    .border(#f60);
    // 使用時我們需要傳入一個引數進去
}

.div {
    border: 2px solid #ff6600;
}

兩個混合，混合名相同，但是引數不同，這是兩個不同的混合，根據引數的個數來決定執行哪個混合

引數預設值

// 定義混合
.border(@border_color:#f60;){
    border:2px solid @border_color;
}
// 使用混合
.div{
    .border();
}

.div {
    border: 2px solid #ff6600;
}

注意： 具有預設值的引數一定要靠後宣告，否則會有語法錯誤。

呼叫的時候有兩種形式

按順序傳參

.box2(100px, 100px, #000);

制定引數名傳參

.box2(@bg:#090, @width: 100px, @height:200px);

（4）條件混合

.arrow(@size:10px, @color: #908, @direction) when(@direction=bottom) {
    width:0px;
    height:0px;
    border-style:solid;
    border-width: @size;
    border-color: @color transparent transparent transparent ;
}

4、匯入

less 支援元件化，允許將不同功能的程式碼放到不同的檔案中。

• less 檔案不需要加字尾
• css 檔案需要加檔案字尾

5、函式

less 提供了內建函式來處理，文件地址 https://less.bootcss.com/functions/，函式和混合的區分

• 混合相當於是自定義函式
• 函式相當於是內建函式

數學函式

• ceil
• floor
• percentage 將小數轉化為 『百分比』

顏色操作

• lighten 加亮
• darken 加暗
• fadein 提高透明度
• fadeout 降低透明度

6、Map

Map 相當於 JS 的物件，可以把一系列的資料儲存在 Map 中

#color(){
    base: #098;
    darker: darken(#098, 10%);
    darkest: darken(#098, 30%);
}

footer{
    height:100px;
    background: #color[darker];
}