奇酷學(xué)院老師html5高級就業(yè)大講堂課件less

1、WHATSLESS01HOWTOUSE02內(nèi)容大綱Table of ContentsCORESYNTAX0301WHATS LESS1.簡介1.Less 是一門 CSS 預(yù)處理語言2.思維：像寫JS和PHP一樣去寫CSS3.語法特性：變量、函數(shù)、Mixin.2.例子color: #4D926F; #header color: color; h2 color: color; #header color: #4D926F; h2 color: #4D926F; example.lessexample.cssless complier02HOW TO USE1.命令行1.通過npm安裝less2.L

2、ess 編譯器or2.客戶端1.less文件2.引入less* less.js的引入要放在less文件之后3.kaola03CORE SYNTAX1.變量nice-blue: #5B83AD;light-blue: nice-blue + #111;#header color: nice-blue;#header-1 color:light-blue2.運(yùn)算 base: 5%;filler: base * 2;other: base + filler;#pro color: #888 / 4; background-color: base-color + #111; height: 100%

3、/ 2 + filler;3.混合 mon-style color: #FFF;#pro mon-style background-color: base-color + #111;3.混合傳參 .border-radius (radius) border-radius: radius; -moz-border-radius: radius; -webkit-border-radius: radius;#header .border-radius(4px);3.混合傳參默認(rèn)值 .border-radius (radius:5px;) border-radius: radius; -moz-bo

4、rder-radius: radius; -webkit-border-radius: radius;#header .border-radius;3.模式匹配 .po(r) position: relative;.po(a) position: absolute; .po(f) position:fixed; .po(s) position: static; .header .po(f);4.嵌套 #header color: black; .navigation font-size: 12px; .logo width: 300px; &:hover text-decoration: none &代表上一個選擇器5.函數(shù) width: 3.65#pro width: ceil(width);*Less提供了豐富的函數(shù)集6.注釋 css可以使用/* */也可以使用/在編譯時會自動過濾掉*Less提供了豐富的函數(shù)集8.導(dǎo)入 import lib.less; import lib;css導(dǎo)入：import lib.css; 9.字符串 base-url: ; background-image: url(base-url/images/bg.png);9.避免編譯 .class filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); 編譯后：.c