如何使用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

3. .....

less的語法

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

1. 注釋

   • // 只在less中顯示
   • /**/ 會在編譯好的css文件中顯示

2. 變量

   • 定義變量用@
     • less中的寫法

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

     • 編譯后在css中顯示的是

     .box {
     	width:100px;
     }
     

3. 混合

   • 不帶參數的混合
     • 先上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;
     }
             ```
     

   • 帶參數的混合---不帶默認值 (可以傳多個參數,以逗號或者分號隔開,推薦用分號 下面以一個參數為例)
     • 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中的寫法

     @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;
     }
     

   • 在解決css3兼容性時候經常用到
     • 解決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;
     }
     

4. 匹配模式

   • 可以理解成if 和上面的混合有些相似
     • 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;
     }
     

5. 運算

   • 運算提供了加,減,乘,除操作,還可以做屬性值和顏色的運算...
     • less中的寫法

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

     • 編譯后在css中顯示的是

     .one {
     	width:200px;
     }
     

6. 嵌套

   • 可以在一個選擇器中嵌套另一個選擇器,代碼看起來層次分明,提高代碼可維護性
     • html結構

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

     • 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;
     }
     

7. @arguments變量

   • 可以包含所有的變量,將變量一起處理
     • less中的寫法

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

     • 編譯后在css中顯示的是

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