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

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

less的介紹及編譯工具

什么是less

1.LESSCSS是一種動(dòng)態(tài)樣式語言，屬于CSS預(yù)處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動(dòng)態(tài)語言的特性，如變量、繼承、運(yùn)算、函數(shù)等，更方便CSS的編寫和維護(hù)。
LESSCSS可以在多種語言、環(huán)境中使用，包括瀏覽器端、桌面客戶端、服務(wù)端。

less的編譯工具

1. Koala 考拉 --編譯的時(shí)候如果沒有建CSS文件夾 Koala會(huì)自動(dòng)給你生成一個(gè)
   如何設(shè)置語言
   
   如何編譯
   -

2. 讓webstorm支持less編譯:

3. 安裝node.js --- 這是一個(gè)包管理工具 以后還會(huì)用到

4. WIN+R

5. 輸入 npm install less

6. .....

less的語法

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

1. 注釋

2. // 只在less中顯示
   

3. /**/ 會(huì)在編譯好的css文件中顯示

4. 變量

5. less中的寫法

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

6. 編譯后在css中顯示的是

   .box {
   width:100px;
   }

7. 定義變量用@

8. 混合

9. 解決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;
   }

10. 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();
    }

11. 編譯后在css中顯示的是

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

12. 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);
    }

13. 編譯后在css中顯示的是

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

14. 先上less中的代碼 如果想在.one中應(yīng)用.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;
    }

15. 寫成下面的樣子

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

16. 編譯后在css中顯示的是
    .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

17. 不帶參數(shù)的混合

18. 帶參數(shù)的混合---不帶默認(rèn)值 (可以傳多個(gè)參數(shù),以逗號(hào)或者分號(hào)隔開,推薦用分號(hào) 下面以一個(gè)參數(shù)為例)

19. 帶參數(shù)的混合---帶默認(rèn)值 (可以傳多個(gè)參數(shù) 下面以一個(gè)參數(shù)為例)

20. 在解決css3兼容性時(shí)候經(jīng)常用到

21. 匹配模式

22. 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就調(diào)用上面對(duì)應(yīng)的
    .border(left);
    }
    .border_use2 {
    //選擇和if差不多 如果是right就調(diào)用上面對(duì)應(yīng)的
    .border(right);
    }

23. 編譯后在css中顯示的是

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

24. 可以理解成if 和上面的混合有些相似

25. 運(yùn)算

26. less中的寫法

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

27. 編譯后在css中顯示的是

    .one {
    width:200px;
    }

28. 運(yùn)算提供了加,減,乘,除操作,還可以做屬性值和顏色的運(yùn)算...

29. 嵌套

30. html結(jié)構(gòu)

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

31. 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;
    }
    }

32. 編譯后在css中顯示的是

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

33. 可以在一個(gè)選擇器中嵌套另一個(gè)選擇器,代碼看起來層次分明,提高代碼可維護(hù)性

34. @arguments變量

35. less中的寫法

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

36. 編譯后在css中顯示的是

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

37. 可以包含所有的變量,將變量一起處理

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com