Less是一種CSS預處理器,它提供了許多CSS不具備的特性,如變量、函數、嵌套、混合等等。Less文件是一種拓展名為.less的文件,通過Less編譯器可以將Less文件轉化為CSS文件。
在編寫Less文件時,我們可以使用變量來存儲顏色、字體等信息,如下所示:
@primary-color: #428bca; @font-size: 16px; body { background-color: @primary-color; font-size: @font-size; }
通過使用變量,我們可以在整個Less文件中方便地對顏色、字體等信息進行修改,而不必一個一個地修改每一個CSS屬性。
另外,Less還支持嵌套。例如,我們可以這樣寫:
nav { ul { padding: 0; margin: 0; list-style: none; } li { display: inline-block; a { text-decoration: none; color: black; &:hover { color: white; background-color: gray; } } } }
在這個例子中,可以看到,我們使用嵌套來表示ul、li和a的層級關系,這樣可以大大減少樣式表中的代碼量,并且更加直觀易懂。
Less還支持混合,可以通過混合來實現CSS的復用。例如,我們可以這樣寫:
.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .button { .border-radius; background-color: red; color: white; }
在這個例子中,我們定義了一個.border-radius的混合,可以接受一個參數,表示圓角的大小,然后在.button中引用了這個混合,這樣.button也具備了圓角的效果。
最后,當我們編寫好Less文件后,需要用Less編譯器將其轉化為CSS文件。這可以通過命令行來完成,也可以使用一些Less編譯器的GUI工具來完成。
下一篇html5網頁代碼免費