LESS使用方法

時間 2019-11-08

標籤使用方法简体版

原文原文鏈接

LESS

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。css

Less 能夠運行在 Node 或瀏覽器端。html

1.安裝

$ npm install -g less
複製代碼

LESS的編譯經常使用的分爲兩種：java

1. 開發環境下(開發項目的時候);
- 咱們基於less-2.5.3.min.js進行編譯：基於link把less文件導入，
  - 可是erl的值必須是stylesheet/less , 這樣導入的JS會找到這些less文件，把less編譯爲css;
1. 生產環境下(項目部署上線的時候)
- 咱們須要把less編譯成CSS，而後讓頁面中導入的都是編譯後的CSS，須要基於node環境，而且基於less模塊進行編譯(命令操做方式);
  - 安裝NODE(安裝NPM)
    - $ npm install less -g(MAC最好設置sudo安裝 sudo npm install less -g);
    - 找到對應的less文件目錄，在目錄中：$ lessc. xxx.less xxx.css / -x (設置-x是爲了把代碼進行壓縮);

<link rel="stylesheet/less" href="less/less.less">
<script src="js/less-2.5.3.min.js"></script>
複製代碼

一、LESS - 變量

相對CSS3來講，LESS的變量存儲一些值以後能夠複用，而且當值發生改變時，只須要修改變量的值便可;node

以下，當@A改爲green，整個值爲@A的都會改爲green,若是項目中有N個元素須要同時改動，用起來很方便;npm

.box{
    color:red;
}

// LESS 
@A:red;
@images:"../images";

.box{
    color:@A;
}
.box2{
    color:@A;
    img{
        background:url('@{images}/XXX.jpg');
    }
}
複製代碼

二、LESS - 嵌套

嵌套（減小前綴）;瀏覽器

每個大括號都是私有做用域，在裏面用到得變量，先看是否私有的（是否在當前做用域中聲明過和形參變量），不是私有的找上級做用域中的;=>"相似於JS做用域鏈機制";bash

unit: LESS中內置的函數，用來設置或者去除單位的;less

// 普通CSS
.contain{
    ...
}

.contain .box{
    ...
}
.contain .box .box2{
    ...
}

// LESS

@W:100px;
@bg:green;
.contain{
    //.contain的樣式
    width:@W;
    
   .box{
   //.contain .box的樣式
   backgroud:@bg;
   @bg:gold;
   
   .box2{
   //.contain .box .box2的樣式;
   }
 }
}

如上代碼，.box的bg優先看本身域有沒有，有就使用本身域，沒有想上找(相似做用域的查找機制);
複製代碼

LESS- 函數

1.每個樣式類都能被充當一個函數，直接在其它的做用域中調取執行（執行特色：不須要傳參，能夠不加小括號） =>這種函數的調用是把原有的代碼都原封不動的拿過來一份如出一轍的（包括其全部的後代樣式）函數

2.帶參數的函數（建立函數帶着小括號），也是直接點的方式調用，可是編譯成爲css的時候，函數不會編譯，可是函數執行出來的代碼會放到每個調取函數的選擇器中

3.less中的內置函數

unit
darken
lighten

一、函數調用應用 ——樣式複用的方法

1.函數調用
2.繼承

// 函數調用
.box1 {
	@A1: lightgreen;
	@W: 200;
	@H: 200px;

	width: unit(@W, px);
	height: @H;
	border: 5px solid @A1;

	//.box1 img
	img {
		//@W-20這樣被理解爲是一個變量名（變量名能夠包含-）
		width: unit((@W)-20, px);
		height: unit(unit(@H, px)-20, px);
	}
}

.box2{
    .box1;// 執行box1,若是結構同樣，能夠複製所有樣式;
}

// 2.樣式繼承
//寫法1
.box2 {
	&:extend(.box1);
}
//寫法2
.box2:extend(.box1) {}

基於繼承也能實現樣式的公用（原理：兩個樣式類公用同一套代碼，可是後代樣式不能被繼承）
複製代碼

二、函數調用應用 —— 公共方法調用

項目中常常會有一些公共樣式，咱們通常能夠寫一些公共的方法放在文件夾，用的時候直接調用便可；

// 公共文件內容common（用來存放公共方法）

.func_center(@W:100,@H:100){
   position: absolute;
   top: 50%;
   left: 50%;
   margin:unit(-(unit(@H,px)/2),px) 0 0 unit(-@H/2,px);
}

.func_transition(@property:all,@duration:.5s,@timing:linear,@delay:0s){
   transition:@arguments;
}


// less.less內容
// 先引入公共方法common;  (reference)表示less文件編譯CSSA時，此文件不編譯
@import (reference) './common.less';


//less樣式引入公共方法

.box1 {
   @A1: lightgreen;
   @W: 200;
   @H: 200px;

   .func_center(@W, unit(@H, px));  //引入居中的函數;
   // unit: LESS中內置的函數，用來設置或者去除單位的(若是有就去除，沒有就加上)
   
   img {
   	.func_transition;
   	.func_transition(@duration: 1s);
   	.func_transition(opacity, .3s, ease, 0s);
       }
}
複製代碼

darken函數

話很少說直接看代碼，看圖

<button class="btn">點擊</button>

LESS樣式
@C1:pink;
.btn {
    width: 100px;
    height: 50px;
	background: @C1;
	&:hover {
		background: darken(@C1, 20%);
	}
}

複製代碼

鼠標滑過以前

鼠標滑過以後，顏色變成深20%;

lighten函數

它增長了元素中顏色的亮度。它有如下參數：

color ：它表明顏色對象。

amount ：它包含0 - 100%之間的百分比。

方法：它是可選參數，經過將其設置爲相對，用於相對於當前值進行調整。

@C1:pink;
.btn {
    width: 100px;
    height: 50px;
	background: @C1;
	&:hover {
		background: lighten(@C1, 50%);
	}
}
複製代碼

鼠標滑過以前

鼠標滑過以後，顏色變成淺，跟darken恰好相反;

.loop() when ()

.loop(@n) when (@n<=4){
    .loop(@n+1);
    .column-@{n}{
        width:unit(@n*10,%);
    }
}

.loop(1);

// 初始值爲@n=1,條件@n<=4;符合條件，每次循環@n+1;.column 每個width:@n*10%;


// 編譯後的CSS
.column-4 {
  width: 40%;
}
.column-3 {
  width: 30%;
}
.column-2 {
  width: 20%;
}
.column-1 {
  width: 10%;
}

複製代碼