Successfully reported this slideshow.
ReeQi@2011-10<br />       is more !?<br />
<ul><li>About {less}
How to use {less}
{less} syntax
{less} is more, really ?
My ViewPoints</li></li></ul><li>About {less}<br /><ul><li>CSS预处理器
兼容传统的CSS语法
简单的语法和变量
支持JS解析、后端语言解析(PHP、node.js)</li></li></ul><li>How to use  {less}<br /><ul><li>引用JS</li></ul><!–JS文件必须在less文件后面引入 --> <br />...
How to use  {less}<br /><ul><li>桌面客户端 for mac</li></ul>http://incident57.com/less/<br />
How to use  {less}<br /><ul><li>命令行</li></ul>http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe<br />
How to use  {less}<br /><ul><li>命令行(node.js)</li></ul>http://www.vertstudios.com/blog/less-app-windows-sorta/<br />
How to use  {less}<br /><ul><li>客户端 for windows</li></ul>http://winless.org/<br />
 {less} syntax<br /><ul><li>Variables—变量
Mixins—混入
Nested Rules—嵌套规则
Namespaces—命名空间
Scope—变量范围
Functions & Operations —运算</li></li></ul><li> {less} syntax<br /><ul><li>Variables—变量</li></ul>@font_color:#4D926F;<br />....
 {less} syntax<br /><ul><li>Mixins—混入</li></ul>.roundedCorners(@radius:5px) { <br />   -moz-border-radius: @radius; <br />...
 {less} syntax<br /><ul><li>Mixins—混入</li></ul>.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){<br />-moz-box-shadow: @argumen...
 {less} syntax<br /><ul><li>Nested Rules—嵌套规则</li></ul>.wrap{<br />    width : 985px;<br />    margin : 0 auto;<br />    ....
 {less} syntax<br /><ul><li>Nested Rules—嵌套规则</li></ul>.wrap{<br />    ……<br />   &:after{<br />       ……<br />   }    <br...
 {less} syntax<br /><ul><li>Namespaces—命名空间</li></ul>.mod1 .mod1_hd {<br />color : #fff;<br />font-size:14px;<br />}<br />...
 {less} syntax<br /><ul><li>Scope—变量范围</li></ul>.wrap header {<br />     color: white;<br />}<br />footer { color : red; }...
 {less} syntax<br /><ul><li>Functions & Operations —运算</li></ul>@base_column_width: 40px; <br />.side{<br />float:left;<br...
Upcoming SlideShare
Loading in …5
×

Less is more

1,432 views

Published on

Published in: Technology
  • Be the first to comment

Less is more

  1. 1. ReeQi@2011-10<br /> is more !?<br />
  2. 2. <ul><li>About {less}
  3. 3. How to use {less}
  4. 4. {less} syntax
  5. 5. {less} is more, really ?
  6. 6. My ViewPoints</li></li></ul><li>About {less}<br /><ul><li>CSS预处理器
  7. 7. 兼容传统的CSS语法
  8. 8. 简单的语法和变量
  9. 9. 支持JS解析、后端语言解析(PHP、node.js)</li></li></ul><li>How to use {less}<br /><ul><li>引用JS</li></ul><!–JS文件必须在less文件后面引入 --> <br /><link rel="stylesheet/less" type="text/css" href="less/styles.less"><br /><script src="js/less.js" type="text/javascript"></script> <br />less-1.1.4.js<br /> 93.262 kb<br />less-1.1.4.min.js<br /> 35.348 kb<br />
  10. 10. How to use {less}<br /><ul><li>桌面客户端 for mac</li></ul>http://incident57.com/less/<br />
  11. 11. How to use {less}<br /><ul><li>命令行</li></ul>http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe<br />
  12. 12. How to use {less}<br /><ul><li>命令行(node.js)</li></ul>http://www.vertstudios.com/blog/less-app-windows-sorta/<br />
  13. 13. How to use {less}<br /><ul><li>客户端 for windows</li></ul>http://winless.org/<br />
  14. 14. {less} syntax<br /><ul><li>Variables—变量
  15. 15. Mixins—混入
  16. 16. Nested Rules—嵌套规则
  17. 17. Namespaces—命名空间
  18. 18. Scope—变量范围
  19. 19. Functions & Operations —运算</li></li></ul><li> {less} syntax<br /><ul><li>Variables—变量</li></ul>@font_color:#4D926F;<br />.content p{<br /> line-height : 22px;<br /> color : @font_color;<br />}<br />.side p{<br /> line-height : 16px;<br />color : @font_color;<br />}<br />.content p{<br /> line-height : 22px;<br /> color : #4D926F;<br />}<br />.side p{<br /> line-height : 16px;<br />color : #4D926F;<br />}<br />
  20. 20. {less} syntax<br /><ul><li>Mixins—混入</li></ul>.roundedCorners(@radius:5px) { <br /> -moz-border-radius: @radius; <br /> -webkit-border-radius: @radius;<br /> border-radius: @radius;<br /> }<br />.mod{<br /> .roundedCorners(10px); <br />}<br />.mod2{<br />.roundedCorners;<br />}<br />.mod{<br />-moz-border-radius: 10px; <br />-webkit-border-radius:10px;<br /> border-radius: 10px;<br />}<br />.mod2{<br /> -moz-border-radius: 5px; <br /> -webkit-border-radius:5px;<br /> border-radius: 5px;<br />}<br />
  21. 21. {less} syntax<br /><ul><li>Mixins—混入</li></ul>.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){<br />-moz-box-shadow: @arguments; <br /> -webkit-box-shadow: @arguments;<br />box-shadow: @arguments;<br />} <br />.mod{<br />.boxShadow(2px,2px,3px,#f36);<br />}<br />.mod{<br /> -moz-box-shadow: 2px,2px,3px,#f36;<br /> -webkit-box-shadow: 2px,2px,3px,#f36; <br /> box-shadow: 2px,2px,3px,#f36; <br />}<br />
  22. 22. {less} syntax<br /><ul><li>Nested Rules—嵌套规则</li></ul>.wrap{<br /> width : 985px;<br /> margin : 0 auto;<br /> .side{<br /> float : left;<br /> width : 185px; <br /> }<br /> .content{<br />float : left;<br /> width : 785px;<br /> margin-left : 15px;<br /> }<br />}<br />.wrap{<br /> width : 985px;<br /> margin : 0 auto;<br />}<br />.wrap .side{<br /> float : left;<br />width : 185px;<br />}<br />.wrap .content{<br />float : left;<br />width : 785px;<br />margin-left : 15px;<br />}<br />
  23. 23. {less} syntax<br /><ul><li>Nested Rules—嵌套规则</li></ul>.wrap{<br /> ……<br /> &:after{<br /> ……<br /> } <br />}<br />.wrap{……}<br />.wrap:after{<br /> ….<br />}<br />.wrap{<br /> a{<br /> &:hover{….}<br /> &:after{…..}<br /> &.current{…..}<br /> span {….}<br /> }<br />}<br />.wrap a:hover {….}<br />.wrap a:after {….}<br />.wrap a.current {….}<br />.wrap a span{….}<br />
  24. 24. {less} syntax<br /><ul><li>Namespaces—命名空间</li></ul>.mod1 .mod1_hd {<br />color : #fff;<br />font-size:14px;<br />}<br />.mod2 .mod2_hd {<br /> border:#000 solid 1px;<br />color : #fff;<br /> font-size:14px;<br />}<br />.mod1{<br /> .mod1_hd{<br /> color : #fff;<br /> font-size:14px;<br /> }<br />}<br />.mod {<br /> .mod2_hd{<br /> border:#000 solid 1px;<br /> .mod1 > .mod1_hd;<br /> }<br />}<br />
  25. 25. {less} syntax<br /><ul><li>Scope—变量范围</li></ul>.wrap header {<br /> color: white;<br />}<br />footer { color : red; }<br />@var: red; <br />.wrap{<br /> @var: white;<br /> header { <br /> color: @var; <br /> } <br />} <br />footer { color: @var;}<br />
  26. 26. {less} syntax<br /><ul><li>Functions & Operations —运算</li></ul>@base_column_width: 40px; <br />.side{<br />float:left;<br /> width: ( @base_column_width * 5 ) - 15;<br /> margin-right:15px;<br />} <br />.content{<br />float:left;<br />width: ( @base_column_width * 20 ) - 15;<br />} <br />.side {<br />float:left;<br />   width: 185px;<br /> margin-right:15px;<br />}<br />.content {<br />float:left;<br />   width: 785px;<br />}<br />
  27. 27. 想知道更多{less},请自备轻功,登陆<br />http://lesscss.org/<br />
  28. 28. 不会轻功?<br />
  29. 29. 也可练功<br />
  30. 30. 详情登陆,或者自行Google<br />https://github.com/cloudhead/less.js<br />
  31. 31. {less} is more,really?<br /><ul><li>对Hack的支持问题</li></ul>http://classtyle.com/jss/<br />
  32. 32. {less} is more,really?<br /><ul><li>对Hack的支持问题
  33. 33. 团队协同开发的问题</li></ul>Style.less<br />Style.css<br />团队维护哪个呢?<br />(增加维护成本)<br />
  34. 34. My ViewPoints<br /><ul><li>类似于ZenCoding,能提高编写、组织CSS的效率;
  35. 35. 装逼利器;
  36. 36. 不盲目跟从,以学习一门新语言的心态来学习;
  37. 37. 在团队合作中,除非有一个很好的使用环境与氛围,</li></ul>否则就像某物一样,是一次性用品;<br />
  38. 38. 扩展阅读<br /><ul><li>10个加速CSS开发的CSS预处理器
  39. 39. LESS介绍及其与Sass的差异
  40. 40. Introducing the LESS CSS Grid
  41. 41. LESS WIKI</li></li></ul><li>The EndThank you!<br />ReeQi@2011-10<br />

×