Your SlideShare is downloading. ×
0
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Less is more
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Less is more

1,291

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,291
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×