LESSCSS讓CSS使用起來更加靈活成就CSS動態化

2024-07-11 08:28:31

字體：大中小

來源：轉載

供稿：網友

提到LESSCSS，可能大家不都不太了解。LESSCSS是屬于css中的一種動態語言。他可以讓CSS使用起來更加靈活，使用方式形如JavaScript中的一些變量，函數等。LESSCSS可以在多種語言和環境中使用，比如服務端、瀏覽器端。
說了那么多LESSCSS的各種好處，下面介紹一下LESSCSS簡單使用方法。
1、變量使用
我們使用LESSCSS的時候，可以單獨定義一些變量，用于我們在任何時候調用。在平日里，我們寫CSS的時候，都會遇到很多字號顏色一樣的時候，這時候，我們要是使用LESSCSS就可以把相同的字體顏色值定義到變量中，遇到一樣的直接調取變量即可。
LESSCSS代碼：

復制代碼

代碼如下:
/*LESSCSS 的變量*/
@bgColor: red;
header {
　　/*調用變量*/
color: @bgColor;
}
footer {
　　/*調用變量*/
color: @bgColor;
}

編譯后的CSS：

復制代碼

代碼如下:
header {
color: red;
}
footer {
color: red;
}

2、函數使用
函數使用或者有人說它是混合使用，其實都是一個意思。這種使用方法就是可以把之前寫好的class類名引入另一個即將編入的class類名中。使用這種方法的前提就是兩種class類名的樣式完全一樣，或者只是數值不一樣。這種使用方法非常像JavaScript中的函數一樣。在引用的類名后面加個小括號，里面可以定義參數，默認的參數值可以在其參數的冒號后面添加。相同參數用英文的逗號隔開。
LESSCSS代碼：

復制代碼

代碼如下:
.box-shadow (@boxShadowColor: red) {
-webkit-box-shadow: 0 0 5px @boxShadowColor;
-moz-box-shadow: 0 0 5px @boxShadowColor;
-ms-box-shadow: 0 0 5px @boxShadowColor;
-o-box-shadow: 0 0 5px @boxShadowColor;
box-shadow: 0 0 5px @boxShadowColor;
}
header {
.box-shadow;
}
footer {
.box-shadow(blue);
}

編譯后的CSS：

復制代碼

代碼如下:
header {
-webkit-box-shadow: 0 0 5px red;
-moz-box-shadow: 0 0 5px red;
-ms-box-shadow: 0 0 5px red;
-o-box-shadow: 0 0 5px red;
box-shadow: 0 0 5px red;
}
footer {
-webkit-box-shadow: 0 0 5px blue;
-moz-box-shadow: 0 0 5px blue;
-ms-box-shadow: 0 0 5px blue;
-o-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}

3、嵌套使用
CSS中若要是書寫標簽中的標簽可以用包含選擇器的方式。如今，用LESSCSS編寫，可以用嵌套的方法編寫。這樣寫可以方便日后代碼維護。
LESSCSS代碼：

復制代碼

代碼如下:

上一篇：在div底部顯示背景圖片實現代碼

下一篇：發現兩個有趣的CSS3動畫效果