Less 日常用法
你需要了解的
less 和 sass 是兩種 css 預編譯語言,其目的是爲了更快、更結構的編寫 css
文件,是一種強大的 css 編譯語言,能使用 變量、運算符、判斷、方法等等。
本文我只寫一些自己常用的方法,要看全部的幫助文檔,參閱這裏:http://lesscss.cn/features/
看個小例子
寫一個 .btn
類並支持 :hover
:active
樣式
CSS
.btn {
/* btn 初始樣式 */
}
.btn:hover{
/* :hover 樣式 */
}
.btn:active{
/* :active 樣式 */
}
Less
.btn{
// btn 初始樣式
&:hover{
// hover 樣式
}
&:active{
// active 樣式
}
}
可以看出 less 的結構要比 css 清晰,並且寫的也要更少。
下面的 less 在使用中就會生成上面的 css。
而這還只是皮毛,保證你用過 less 之後就不會再用 css 寫樣式了。
變量
less
是支持變量的,因爲有了變量,讓 less
在改變全局樣式的時候更加方便了。
一般使用中,顏色是最常用的。其次是單位長度。
@變量名: 變量值
// 如:
// Colors
@red: #CD594B;
@yellow: #F8CE5E;
@green: #4B9E65;
@yellow: #5A8DEE;
// Unites
@btn-padding: 4px;
@btn-lineheight: 26px;
實際使用中:
less
.btn-success {
background-color: @green;
line-height: @btn-lineheight;
color: #fff;
}
生成 css
.btn-success {
background-color: #4B9E65;
line-height: 26px;
color: #fff;
}
混合
可以直接在其它類中插入其它類的內容。
less
.bg-yellow {
background-color: @yellow;
}
.btn-warn {
line-height: @btn-lineheight;
.bg-yellow;
}
會生成 css
.bg-yellow {
background-color: #F8CE5E;
}
.btn-warn {
line-height: 26px;
background-color: #F8CE5E;
}
運算符
less 支持 +
-
*
/
( )
運算,看例子
@width-20: 20px;
@count: 3;
@per-10: 10%;
.card{
width: width20 * @count;
min-width: @per-10 * 7;
}
// 注意,運算的時候,要在運算符兩邊留空格,因爲可能會有橫線連接的變量,造成混淆。
// 單位 less 可以自動識別,不用擔心單位。
輸出
.card{
width: 60px;
min-width: 70%;
}
less 的內置函數
參閱 : http://lesscss.cn/functions/#...
完整的函數有:雜項函數
、字符串函數
、 列表函數
、 數學函數
、類型函數
、顏色定義函數
、顏色通道函數
、顏色操作函數
、顏色混合函數
這裏只說一此關於顏色的常用方法,因爲其它的我現在也沒怎麼用到。
lighten(顏色, 百分比)
// 調高顏色的亮度
darden(顏色, 百分比)
// 調低顏色的亮度
saturate(顏色, 百分比)
// 調高飽和度
desaturate(顏色, 百分比)
// 調低飽和度
@green: #4B9E65;
.green{
background-color: @green;
}
.green-lighten{
background-color: lighten(@green,20%);
}
.green-darken{
background-color: darken(@green,20%);
}
.green-saturate{
background-color: saturate(@green,20%);
}
.green-desaturate{
background-color: desaturate(@green,20%);
}
輸出
.green {
background-color: #4B9E65;
}
.green-lighten {
background-color: #88c79c;
}
.green-darken {
background-color: #2a5939;
}
.green-saturate {
background-color: #34b55c;
}
.green-desaturate {
background-color: #62876e;
}
函數方法的使用
有時候,比如,你需要寫一個按鈕類 .btn-success
, .btn-danger
, .btn-default
, .btn-warning
,如果單個定義的話,會很麻煩,現在用了方法,就可以直接填參數完成了。
less
@green: #4B9E65;
@blue: #5A8DEE;
@yellow: #F8CE5E;
@red: #CD594B;
.btn-template(@bgcolor,@fcolor:white){
// 定義了兩個參數,第二個參數有默認值
// 也就是說這個方法可以值一個或兩個參數
// 另外 帶 () 參數的方法不會把自身渲染到 css 中,只有調用纔會渲染
color: @fcolor;
border-color: darken(@bgcolor, 3%);
background-color: @bgcolor;
&:hover {
color: @fcolor;
background-color: darken(@bgcolor, 5%);
}
&:active {
color: @fcolor;
background-color: darken(@bgcolor, 10%);
}
}
.btn-blue{
.btn-template(@green)
}
.btn-blue{
.btn-template(@blue)
}
.btn-blue{
.btn-template(@yellow)
}
.btn-blue{
.btn-template(@red)
}
上面的 less 輸出爲下面的內容,有沒有很厲害
.btn-blue {
color: white;
border-color: #46945e;
background-color: #4B9E65;
}
.btn-blue:hover {
color: white;
background-color: #438d5a;
}
.btn-blue:active {
color: white;
background-color: #3b7b4f;
}
.btn-blue {
color: white;
border-color: #4c83ed;
background-color: #5A8DEE;
}
.btn-blue:hover {
color: white;
background-color: #437dec;
}
.btn-blue:active {
color: white;
background-color: #2c6de9;
}
.btn-blue {
color: white;
border-color: #f7ca4f;
background-color: #F8CE5E;
}
.btn-blue:hover {
color: white;
background-color: #f7c746;
}
.btn-blue:active {
color: white;
background-color: #f6bf2d;
}
.btn-blue {
color: white;
border-color: #ca4e3f;
background-color: #CD594B;
}
.btn-blue:hover {
color: white;
background-color: #c74737;
}
.btn-blue:active {
color: white;
background-color: #b34032;
}
文件拆分,文件引用
像 js 和其它高級開發語言一樣, less 也可以引用外部的 less 文件
引用格式:
@import "variables.less"
這樣就把外部的 variables.less
引入到當前文件中了
variables.less
// colors
@green: #4B9E65;
@blue: #5A8DEE;
@yellow: #F8CE5E;
@red: #CD594B;
// units
@common-height: 30px;
@input-height: 26px;
@input-padding: 4px;
主體less文件
@import "variables.less"
// 主文件裏面就可以引用 variables.less 中的變量了。