Less基礎

Less基礎

    CSS是一門非程序式語言，沒有便理那個、函數、SCOPE（做用域）等概念

    CSS須要書寫大量看似沒有邏輯的代碼，CSS冗餘度是比較高的

    不方便維護及擴展，不利於複用

    CSS沒有很好的計算能力

    非前端開發工程師來說，每每會由於缺乏CSS編寫經驗而很難寫出組織良好且易於維護的CSS代碼項目

Less介紹

    Less(Leaner Style Sheets)是一門CSS擴展語言，也稱爲CSS預處理器，一句話：Less是一門CSS預處理語言，它擴展了CSS的動態特性。

    做爲CSS的一種形式的擴展，它並無減小CSS的功能，而是在現有的CSS語法上，爲CSS加入程序式語言的特性，

    它在CSS的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了CSS的編寫，而且下降了CSS的維護成本，就像它的名稱所說的那樣，Less可讓咱們用更少的代碼作更多的事情

    常見的CSS預處理器：Sass，Less，Sytlus

     less安裝

        npm install -g less

        查看less版本 lessc -v

Less使用

    咱們首先新建一個後綴名爲less的文件，在這個less文件裏面書寫less語句

         Less變量

            變量沒有固定的值，所以咱們在CSS中能夠重複使用

             @變量名:值；

             命名規範

                必須有@爲前綴

                不能包含特殊字符

                不能以數字開頭

                大小寫敏感

            @color:pink;
            .box{
                height: 100px;
                width: 100px;
                @color;
            }

 

         Less編譯

            本質上，Less包含一套自定義的語法及一個解析器，用戶根據這些語法定義本身的樣式規則，這些規則最終會經過解析器，編譯生成對應的CSS文件。

            因此，咱們須要把咱們的less文件，編譯生成爲css文件，這樣咱們的html頁面才能使用。

         Less嵌套

            .header{
                width: 200px;
                height: 200px;
                #pink;
                a{
                    color:red;
                }
            }

 

            若是碰見（交集|僞類|僞元素選擇器）

                內層選擇器的前面沒有&符號，則它被解析爲父選擇器的後代

                若是有&符號，它就被即係爲父元素自身或父元素的僞類

                .header{
                    width: 200px;
                    height: 200px;
                    #pink;
                    a{
                        color:red;
                        &:hover{
                            color:blue;
                        }
                    }
                    &::before{
                        content:"";
                    }
                }

 

         Less運算 

            任何數字、顏色或者變量均可以參與運算。就是Less提供了加減乘除算數運算

                @border:5px + 5;
                @width:100px;
                .box{
                    height: 100px - 20;
                    width: 100px * 2;
                    border: @border solid #333 - #222;
                }
                .header{
                    width: 82 / 50rem;
                    height: (@width + 5) * 2;//還能夠這樣寫
                }

 

             注意：

                乘號和出好的寫法

                運算符中間左右有個空格隔開1px + 5

                對於兩個不一樣的單位的值之間的運算，運算結果的值取第一個值的單位

                若是兩個值之間只有一個值有單位，則運算結果就取改單位

less文件引入

　　　　能夠加後綴名也能夠不用加後綴名

             @import "common";