-
1、Less-避免編譯 -有時(shí)候我們需要輸出一些不正確的CSS語(yǔ)法或者使用一些less不認(rèn)識(shí)的專有語(yǔ)法 -要輸出這樣的值我們可以在字符串前加上~ 例如：.test_03{ width:~calc(300px-30px)';//（原封不動(dòng)的輸出，避免編譯） //對(duì)于濾鏡等less不認(rèn)識(shí)的語(yǔ)法，避免報(bào)錯(cuò)。 } //用雙引號(hào)也可 2、!important關(guān)鍵字 -會(huì)為所有混合所帶來(lái)的樣式，添加上!important !important擁有樣式的最高優(yōu)先級(jí)一般調(diào)試的時(shí)候才會(huì)用 更多l(xiāng)ess網(wǎng)址：lesscss.net 總結(jié)： 1、編譯工具 (1)koala編譯(推薦使用--是國(guó)人開發(fā)的LESS/SASS編譯工具) (2)Node.js庫(kù) (3)瀏覽器端使用 2、Less中的注釋 -可以使用CSS中的注釋( /**/ ) -也可以用//注釋 //編譯時(shí)會(huì)自動(dòng)過(guò)濾掉(即如果在less里寫的是//注釋，在轉(zhuǎn)到css文件里看是看不到的)查看全部
-
less文件引入另一個(gè)less @import "ku";less文件引入css文件@import(less) "a.css"查看全部
-
Less簡(jiǎn)介查看全部
-
http://koala-app.com/index-zh.html查看全部
-
http://koala-app.com查看全部
-
less中聲明變量：@變量名:值; 變量的使用： div{ width:@變量名; }查看全部
-
不能用red-300查看全部
-
1、Less-避免編譯 -有時(shí)候我們需要輸出一些不正確的CSS語(yǔ)法或者使用一些less不認(rèn)識(shí)的專有語(yǔ)法 -要輸出這樣的值我們可以在字符串前加上~ 例如：.test_03{ width:~calc(300px-30px)';//（原封不動(dòng)的輸出，避免編譯） //對(duì)于濾鏡等less不認(rèn)識(shí)的語(yǔ)法，避免報(bào)錯(cuò)。 } //用雙引號(hào)也可 2、!important關(guān)鍵字 -會(huì)為所有混合所帶來(lái)的樣式，添加上!important !important擁有樣式的最高優(yōu)先級(jí)一般調(diào)試的時(shí)候才會(huì)用 更多l(xiāng)ess網(wǎng)址：lesscss.net 總結(jié)： 1、編譯工具 (1)koala編譯(推薦使用--是國(guó)人開發(fā)的LESS/SASS編譯工具) (2)Node.js庫(kù) (3)瀏覽器端使用 2、Less中的注釋 -可以使用CSS中的注釋( /**/ ) -也可以用//注釋 //編譯時(shí)會(huì)自動(dòng)過(guò)濾掉(即如果在less里寫的是//注釋，在轉(zhuǎn)到css文件里看是看不到的)查看全部
-
@arguments變量 @arguments包含了所有傳遞進(jìn)來(lái)的參數(shù) 如果你不想單獨(dú)處理每一個(gè)參數(shù)的話就可以像這樣寫： .border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments; //@arguments可以把你所傳的所有的變量直接帶過(guò)來(lái)，在這里@arguments，就等于border:@w @c @xx;是一個(gè)意思 }查看全部
-
Less-嵌套 .list{ .... li{ .... } a{ &:hover{ color:red } // & 代表上一層選擇器，這里的上一層選擇器是a } } css選擇器的子選擇器越多，即嵌套越多，匹配次數(shù)越多次，加載性能會(huì)越低下，所以盡量少嵌套。查看全部
-
Less-運(yùn)算 -任何數(shù)字、顏色或者變量都可以參與運(yùn)算，運(yùn)算應(yīng)該被包裹在括號(hào)中 例如：加減乘除 @test_01:300px; .box_02{ width:(@test_01-200)*5; //因?yàn)樯厦鍬test_01帶了單位px，所以這里的200就不需要帶單位了 color:#ccc-20; //less會(huì)把顏色轉(zhuǎn)為255，然后進(jìn)行加減乘除，實(shí)際工作中顏色運(yùn)算很少用 }查看全部
-
Less-匹配模式 -相當(dāng)于JS中的if，但不完全是 -滿足條件后才能匹配 .sanjiao{ width:0; height:0; overflow:hidden;//題外:這行用來(lái)處理IE6最小高度的問(wèn)題 border-width:10px; border-color:red transparent transparent transparent; border-style:solid dashed dashed dashed;//因?yàn)閎order-style:solid;這樣寫在IE6會(huì)有黑底 }//題外：這樣就實(shí)現(xiàn)了一個(gè)紅色倒三角 .triangle(top,@w:5px,@c:#ccc){ border-width:@w; border-color:transparent transparent,@c,transparent; border-style:dashed dashed solid dashed; .triangle(bottom,@w:5px,@c:#ccc){ border-width:@w; border-color:@c transparent transparent transparent; border-style:solid dashed dashed dashed; } .triangle(@_,@w:5px,@c:#ccc){ width:0; height:0; overflow:hidden; } .sanjiao{ .triangle(bottom,100px); } 匹配模式-定位例子 .pos(r){ position:relative; } .pos(a){ position:absolute; } .pos(f){ position:fixed; } .pipei{ width:100px; height:100px; .pos(r); }查看全部
-
Less 混合:一個(gè)元素引用另一個(gè)元素的樣式 1、混合變量 例如：.border{border:solid 10px red;} 如果.div也想用這個(gè)樣式直接寫： .div{ .border } 可帶參數(shù) 2.變量沒(méi)帶值： .border-radius(@radius){css代碼} .border_02(@border_width){ border:solid yellow @border_width; } .test_hunhe{ .border_02(30px); } 3.變量帶(默認(rèn))值：.border-radius(@radius:5px){css代碼} .border_03(@border_width:10px){ border:solid green @border_width; } .test_hunhe_03{ .border_03(); } 另外，雖然.border-02 和.border-03里面的變量都叫@border-width 但它們不沖突查看全部
-
1.less中聲明變量用@開頭 寫法是 @變量名:值; 例如：@test_width:300px; 2.sublime 里要裝less這個(gè)插件，才能高亮顯示代碼 3.語(yǔ)法錯(cuò)誤是保存過(guò)less文件，koala才會(huì)提醒查看全部
-
@_ 不管匹配到誰(shuí)，都要帶上@_里的內(nèi)容查看全部
舉報(bào)
0/150
提交
取消