less 前端开发基础总结+案例_第1页
less 前端开发基础总结+案例_第2页
less 前端开发基础总结+案例_第3页
less 前端开发基础总结+案例_第4页
less 前端开发基础总结+案例_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

目录Less.Less介绍：lesS使用方法/编译方式（只介绍3中）：通过less..js方法2：通过koala的第三方软件方法3：通过Hbuider自带的编译方式。（比较简单）变量注释：变量概念：可变的量（值）变量的声明：@变量名：值；用变量声明变量属性名：变量存图片路径地址等：混合（1）混合写法：（引用写法）（2）混合带参（3）混合带参，参数可以带值单独对每个参数进行修改一起对参数进行赋值匹配模式LessLess介绍：和css类似，但是css是静态语言，less是动态语言；Less的语法和js语法很像，可以使用变量，混合，嵌套，运算等；比如line-heig的值可以动态的去计算得到。区别：）.Les文件可以再浏览器上运行还可以再服务器端运行比如node.j中。而css只能是浏览器识别的语言;less使用方法/编译方式（只介绍3中）:1.通过less.js（1）下载less.文件S4ur:tcodtGelkredszuEtccde-町ng1crect|>flranGltH-bCisirwiixFmviaGtiHubRoclupre囹ar”gg佗mhjIIn汨IIwin丽出I陶itwL&sj&SfiWtura由>■跪Hpcd>机帅Inns（1）下载less.文件S4ur:tcodt（2）引入less.文件地址

75%50%.；!■-■,!■■t75%50%3<1DOCTYPfhtrtil>3h<tiead>setachirset""UTF-B*><scriptsrc-"j5/less.js"></script></head>ttKdyj</body>(3)Ctrl+i或者右键■新建，选择新建les文件wlessExainple.4less.rnin.j&lessiIBtest.Iess肩lessTest.html(4)注意：(4)l.l.lles的文件一定得在（less.jsjs文件的上面；1.1.2用link示签引入les文件，需要把relg性的值改成stylesheet/lessehar5rt-"UTF-BH>(5)->GO®127r0.01:S020/lessExample^essTesr.mml?_htrt=15533959S7152艰应用学习世界艰应用学习世界龄兰直一下r保敝道曲新浪典ff］百度•译□［宣网】BG笑直身2.方法2:通过koala的第三方软件(1)⑵安装koala第三方软件打开koala后-点击设置图标■更改语言(1)⑵安装koala第三方软件打开koala后-点击设置图标■更改语言（3）右键打开文件所在目录，拖拽已经建立的的less文件到koala的界面选中要编译的les文件:1.i^k^wldth!卫即冏；height:;ba^kgraundl&p^sitl^n:日hmluw}compress（4）点击‘执行编译’后会生成选中les文件的Css文件：如下图;（5）然后在html中引入自动生成的css文件；+-凹启卸权国KG己&4向•女站・射，曰•■^1-ggkMIlc-；i；r4Gihnn-JRIstZlwm|m|:■baiDij_M*eb:*C5K3T«t■IwtEnianripj^营<£££■bMtC55□t«t2E:litss1<tCOC7YPElhtml>2O<html>m□:<head><metjcharset=BUTF-Sn><1■:i-11~1户±I尸£号”5七?1己5册己会1：・'hr^F=”£S5/t：W3t2.・£SS・'/〉|吨况｝中］wbcidy*.bwllewLteft2Jei5国lin+TmtHmlItamm.htnil<clast=ubox'14></>10*</body>11123.方法3：通过Hbuider自带的编译方式。（比较简单）（1）打开les文件后，右键编译选中存放位置和css名字引入编译好的css文件口DCCTYPEhtml><rr.etacjiar5«='UTF-E">心|<linkrel-"5tyl€sheethref-ncs5/3-ifi7j£^rjS^i.c55"1/>]8-<body>1m<dlvcLds£=*bo**></div>I®<ybady>11变量变量注释：也上・弟鼻相碧二任方法mm：日N演胃回*ifi画就箕与T方话.nUn!w*BiurjJEM.gw~w**这里是注群，这个注雅在匚布里是可以看现的V4变量概念：可变的量(值)*变量*可变的最w*a=16;*在下审要用SI1W的地方就可以用球表示I变量的声明：@变量名：值;这里的=±^CSS可以直搀蝙译过去freight;PBMIttBTT!邮凸;left:border,：!^border;^(calan}:red;background-@(color};bl.Liie;|is200iJX]gpos：relative;@left：400px-*border:Ipx这里的=±^CSS可以直搀蝙译过去freight;PBMIttBTT!邮凸;left:border,：!^border;^(calan}:red;background-@(color};bl.Liie;|is200iJX]gpos：relative;@left：400px-*border:Ipxsolidwidth:200pxjheight:200px;/*position:relative;left:400pxjborder:Ipxsolidredjcolor:redJbackground-color:blueItssTertl.boTillessTest3.html用变量声明变量属性名：用变量去定义一个属性名的时候，用的时候，一定要给这个变量名家一个大括号。@｛变量名｝*定交理；鼬ffSi欧与卿涯握■啪!叮5细2。％勺relative;g'left^Wpxif：鞋】・h・『门|:网1即red;3^cola^color'lb■lessIest5.htmlEtenJ.Iess旧0{12mdthz^Wyheight:ii;pD5rtL£7n;^poj.jLeft:6口尸dK：(c^LorJ^red;background-fcatar)::blue;19}1口2s定义穗：这里的以直瞄圣过去3蓉/■.box\witft/r:200px;height::200pxjposition:relative;Left:400pxj9border-.Ip翼molidred;coLar-:red,background-coLorzblue;■2}变量存图片路径地址等：注意用变量定义一个路径的时，在用时，一定要在整个路径的外面加上一对引号，且路径名在用的时候也要加大括号;定菠里：：理的主暮「5弓可以直推瑞译过去-□.UDX{Midth:20&^x;height:2&9:;position:relative;Left:4003x;bord&r:1ixsolidred;color：red;bockground-iinoge:url()，/injg/u5.erbg_92,jpg1);：20ti;■:k:relative;/'ill：-':40&p:;)o-Jerilp■:solidred;jicili:r:,-iilor；1；'mgE:1../ime1;lin7box|wtJt/i:;hsig/it:伽；Fpositwp：^ptM；15Left:lbborder1,^border;'{color}:rfid^LS//backgrauind-^fcDlor}:blu?;19uacfegrotind1-image;url(1母{血眠}/u5e「bg_9Lj能，)四}混合混合写法：(引用写法)把另一个选择器的名字放在这个样式里，这个样式就会具有放入的选择器的样式;把A选择器名字放入B的样式里，B就会具有A里的样式；如下图：编译前和编译后!□「542*定艾疝重二这里成隆奔仁与5可以直族牖样过去61；5*pos:relative;m*/7P并1：4的『1：,:；/□・class{8I：：lbord€rilpxsolidred;gfonte2epx/40px“•眦雅黑七9'㈣color;EcoL^rired;101:r--/1rb';|7borcfer:Ipxsolidred;Stext-crLTg:centerj12:tont：20px/40pX“㈱姗W；9}or}zred;!&□.bow{14bolder1：i-Jh■Ir-1Jr；11kvicft/i;200pxj15text-oLig^ticenter;12height!200pxj16}IBf~TDFT:reJstiwe;ITS-box{14:£e/t:400|ix;15讯dth魂w.15|font;2?/40y作作尘19height:16:colorired]29positioni：§pcs517:border*Ipxsolidred;2118:text-at'tffn:centeif;221;理非;,一、19b□ckground--irmge1url(B.-/img/userbg_02・jpg1)23bacjltgrai/nd-image:url(piMgeJ■/userbgL_02Bjpg1)j2B}24}一---Hl口,box2{2EJE1ubox2(22kvicft/i:;200[^xj26；23height:200pxj27h&ight:鼬：捉poszf~TDFT:rels±iwe;28pasitian«3pcs3八Left:4#epxj29随]■m—t;2&：font:20Px/40px”龄雅里七3927colorired]51bsckjground-J{coLor):blue;28bor-der*Ipxsolidred^32}29:text:•:enter--1-：.3S:■3-11_background-coLanbluej混合带参混合带参，参数可以带值①混合带一个参数

②混合带多个参数A.单独对每个参数进1行修改4546〃温儡斜蠲47D.border2(-Lenz^px,^4546〃温儡斜蠲47D.border2(-Lenz^px,^h：solid^r:yellow){4SiiorJer:他Len^style^color;49}5?Q.box4031.class].border2();.horder2(^bLe:15px);.border2[:dotted!\.borden2[；:olo-:gra^);56579口.box4(0ifont:20PX/403X”微钦睡里“；1:coLor:redjborder:lpxsolidred;text-aLzgn:center^A-\rmrgir?:10px;[floatsLe/t■|width:290'pxjjheight:业叩x;8bor-der:1pxsolidyellowy9border:15pxsolidyellow;0border:4clottedyellowj|1border:4pxsolidgray;2j.harder?(-^bLenziepXj^style:dottedor:blue)jbord&rz10iKdottedblue;

9兼容性共用样式&口-box5hadow(^x:SpXjgy:Spx3glarea:5pxtgcolor:#ccc){-^ebki.t-bax-shado^z@x野@area^Icolor;j-moz-box-shadow:@x@ygarea^color;//^rfox-ms-box-shadow:京■/)areaJcoLor^4-a-box-shadow@y@ap&a@)cd!dp;//safira苹果box-shadow:■/?area：'colorj?■□-box5{・classj.bDxShadouf);}63}64^.boxS■{6566707172137475766566707172137475767778border:Ipxsolidred;'.center;margin:10px;fLoat'.left'尻d比;200pxjhezgfit:2002ix;-webfeit-£?c??r-s/]c?t/c?w:Spx5px5px.#gccj-moz-box-shadow:Spx5px5px#ccc;-ms-box-shodow:5px5px5px#cccj-o-box-shadow:5px5p王5p?#ccc;丹』—5px5px5px#ccc^匹配模式(1)Less内容:37〃匹B勰式・朝右前三闻形，•：耳口・七!-rangle(right,:5p>：?It:red){99:banker—width:jcptor:transparenttr^nspair-enttriansparent@匚§barJer-5tyi-e:solidsolidsolidsolidj}觇式-朝旧的三角形140.triangle{botto®,;5「：“：,Jc:red){15:bo^de^-krtdth:;bo^er-c&Lor:tpamsp召renttir-aosparenttean&parent;border-5t>Le:solidsolidsolidsolid;}〃四怨式-朝朝三甬形2£)□.triangle(Le/tf:-?;red)(:bar-d^-kfidth-■Jbar-d&r-cdLor:transparent@>ctranisparenttransparent":border-si.e:solidsolidsolidsolid;M}

5网width:0■height:6;QverfLo^/:hiddenj.triangletop,^fcJpx^green);.triangle(bottomf23>blue);Css生成内容:>3-.sjx3{wlc/th:0;height:0;£?verfLohf:hiddenjbard&r-coLor1bord巴尸-mHdth>3-.sjx3{wlc/th:0;height:0;£?verfLohf:hiddenjbard&r-coLor1bord巴尸-mHdthborder-caLorborder-styleLess:巧#/公用的#式，园Tffi腕个匚比55里、如V第一个愁敢是回定的格就，后面的参励与上面的方蜷持一期：I7Q-triangle(f.讥5「、jli.::red)■(也:width:*9:0;:c1«QverfLowihiddeiijH:FRorgin-tap：!10p¥；^2:disptay;irline-black;口}J4dTtrgl{.triangleftopj,20PX,green);垢}'??□^trgZf.tpiangle(bottomfH&i酒green);旧)-a/tre3，l11:.t:riangle(Le/±j20-pxfgreen)jU}■■■-I3a.trg4^|I.tf,iangle(r-i5ftt?20：>^,green)j}Css:5S5.Te5.t3.htmII曲tc■就3.le■尊导PltestS.cssS}!7口.trg3(LBbo/Y/er-width:20pxjborxJer-coLor:transparentborder-style:solidsolidflwicftJb:0s口height:0;overftaw:hiddenjffjorgin-top:10pxjdisplay:inlioe-block;冶}口口.trg4(bo/Y/er-width:20pxjbort/er-cotor:transparentborJer-jtyte:solidsolidHwidtJb:0s12height:0;ou&rftow:hidden;margin-fop:10pxjdispLay:inlioe-block;w}greentransparenttrainsparentjsolidsolid;transparenttranspareintgreen•solid5olid;效果:嵌套举例：<divclass="box6"><H2>Box6</h2><ahref="#">j5^</a><ul>1i><ahr日十="#">uJ.l开始啦</a></li>1iXahref="#"*uJ.2开始啦t/a></li>1i><ahref="#">uJ3开始啦</a></li>1iXahref="#">ul4fl始啦〈/a></li>1i><ahref="#">ul5开始啦a></li>1i><ahref="#">uJ.6开始啦</a></li></u]>4/rHw、coLor:green;].box6-{coLor:green;.classj.border1();】h"font:15px/20px.徵欺，黑七caLor:greenjEdo~JL61D.box6h2{162font:15px/20px”微软雅黑飞L63}L时口.box6p{165|L66}3ui(

^rcrrjtn:0j

£ist-styte:none;IJ1{.height:30pxjbackground:#CCCCCCjL67E1.box6ul{L6B|L69|170}margin:0jList-style:none■a{bLw：户如；1710.box6ulli{L72L73height:30px;background:#CCCCCC;^.75D.box6ullia{

coLor:red■176:P7}h~7o上一层选择器：用&表示Hles^Te&tS.html1700.box6u1li{171height:30px;172background:#CCCCCCj173}1/^n.box6u1lia{Jr175coLor:red;1/176}1770.box6u1lia:hover《178cofor:bluej17QI运算注意：在做减法运算的时候，减号要加上空格。其他运算符+*/不用加空格;举例：less-css1Ssiboxlfwidth:@w;_丁、height:gw+10©;减法的运算，减号左右必须有；height:-^3;/空格，否则会报umkfinM错误3border:Ipxsolidfrfea；l-ICM^iS.-nmlf切sI??-活棒■«*氛P袒瞒二海.feI「Ft|.boxl{width:360px;height:-108px;height:20Qpxjbo

人人文库> 全部分类> 行业资料 > 机电工程

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论