使用less(變數,混合,匹配,運算,嵌套)的方法介紹

如何使用less及一些常用的(變數,混合,匹配,運算,嵌套)

less的介紹及編譯工具

什麼是less

1.LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變數、繼承、運算、函數等，更方便CSS的編寫與維護。
LESSCSS可以在多種語言、環境中使用，包括瀏覽器端、桌面用戶端、服務端。

less的編譯工具

1. Koala 無尾熊--編譯的時候如果沒有建CSS資料夾Koala會自動給你產生一個
   如何設定語言
   
   如何編譯
   -

2. 讓webstorm支援less編譯:

• 安裝node.js --- 這是一個套件管理工具以後還會用到

• WIN+ R

• 輸入npm install less

#.....

less的語法

Ps:下面的知識點會用到上面的知識點(比如說在混合中會用到變數加深印象^_^)

1. ##註解

• // 只在less中顯示

  
  

• /**/ 會在編譯好的css檔案中顯示

變數

• #less中的寫法

  @ly_width:100px;
  .box {
  width:@ly_width;
  }

• 編譯後在css中顯示的是

  .box {
  width:100px;
  }

• #定義變數用@

##混合

解決border-radius相容

• .border_radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
  }

less中的寫法

• @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border(@border_width:3px;) {
  border:@border_width solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border();
  }

編譯後在css中顯示的是

• .one {
  width: 100px;
  height: 200px;
  background-color: #008000;
  border: 3px solid #ff0000;
  }

#less中的寫法

• @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border(@border_width) {
  border:@border_width solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border(1px);
  }

• 
  

編譯後在css中顯示的是

.one {
width: 100px;
height: 200px;
background-color: #008000;
border: 1px solid #ff0000;
}

先上less中的程式碼如果想在.one中應用.border的樣式怎麼辦?

• @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border {
  border:1px solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  }

寫成下面的樣子

• @ly_width:100px;
  @ly_height:200px;
  @ly_color:green;
  .border {
  border:1px solid red;
  }
  .one {
  width:@ly_width;
  height:@ly_height;
  background-color:@ly_color;
  .border;
  }

#編譯後在css中顯示的是

• .border { border:1px solid red ; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

• #不帶參數的混合

帶參數的混合---不帶預設值(可以傳多個參數,以逗號或分號隔開,推薦用分號下面以一個參數為例)

• 帶參數的混合---帶預設值(可以傳多個參數下面以一個參數為例)

• 在解決css3相容性時候常用到

##less中的寫法

//定义上,下,左,右边框的样式
.border(top;@border_width:5px;@border_color:red){
border-top:@border_width solid @border_color;
}
.border(bottom;@border_width:5px;@border_color:red){
border-bottom:@border_width solid @border_color;
}
.border(left;@border_width:5px;@border_color:red){
border-left:@border_width solid @border_color;
}
.border(right;@border_width:5px;@border_color:red){
border-right:@border_width solid @border_color;
}
//如果想写通用的样式 可以在下面的代码中写 格式是固定的 
.border(@_,@border_width:5px;@border_color:red){
border-color:yellow;
}
.border_use1 {
//选择和if差不多 如果是left就调用上面对应的
.border(left);
}
.border_use2 {
//选择和if差不多 如果是right就调用上面对应的
.border(right);
}

## #######編譯後在css中顯示的是###

.border_use1 {
border-left:5px solid #ff0000;
border-color:yellow;
}
.border_use2 {
border-right:5px solid #ff0000;
border-color:yellow;
}

################可以理解成if 和上面的混合有些相似###### #########運算###############less中的寫法###

@ly_width:100px;
.one {
width:@ly_widht + 100;
}

#########編譯後在css中顯示的是###

.one {
width:200px;
}

###############運算提供了加,減,乘,除操作,還可以做屬性值和顏色的運算...####### ########巢狀###############html結構###

<p class="one">
<p class="two"></p>
</p>

#########less中的寫法###

@ly_width:100px;
@ly_height:200px;
@ly_color:red;
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
.two {
    background-color: green;
}
}

## #######編譯後在css中顯示的是###

.one {
width: 100px;
height: 200px;
background-color: #ff0000;
}
.one .two {
  background-color: green;
}

################可以在一個選擇器中嵌套另一個選擇器,程式碼看起來層次分明,提高程式碼可維護性###############@arguments變數###############less中的寫法###

//和前面提到的混合一起举个栗子  
.border(@border_width;@border_style;@border_color){
border:@arguments;
}
.one {
.border(1px;solid;red);
}

# ########編譯後在css中顯示的是###

.one {
border:1px solid #ff0000;
}

################可以包含所有的變數,將變數一起處理##### #######

以上是使用less(變數,混合,匹配,運算,嵌套)的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！