ReeQi@2011-10

is more !?

• About {less}

• How to use {less}

• {less} syntax

• {less} is more ， really ?

• My ViewPoints

About {less}

• CSS 预处理器• 兼容传统的 CSS 语法• 简单的语法和变量• 支持 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

How to use {less}

• 桌面客户端 for mac

http://incident57.com/less/

How to use {less}

• 命令行

http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe

How to use {less}

• 命令行（ node.js ）

http://www.vertstudios.com/blog/less-app-windows-sorta/

How to use {less}

• 客户端 for windows

http://winless.org/

{less} syntax

• Variables— 变量• Mixins— 混入• Nested Rules— 嵌套规则• Namespaces— 命名空间• Scope— 变量范围• 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;}

{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;}

{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; }

{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;}

{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{….}

{less} syntax

• Namespaces— 命名空间

.mod1{ .mod1_hd{ color : #fff; font-size:14px; }}.mod { .mod2_hd{ border:#000 solid 1px; .mod1 > .mod1_hd; }}

.mod1 .mod1_hd { color : #fff; font-size:14px;}

.mod2 .mod2_hd { border:#000 solid 1px; color : #fff; font-size:14px;}

{less} syntax

• Scope— 变量范围

@var: red;

.wrap{ @var: white; header { color: @var; } }

footer { color: @var;}

.wrap header { color: white;}

footer { color : red; }

{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;}

想知道更多 {less} ，请自备轻功，登陆

http://lesscss.org/

不会轻功？

也可练功

详情登陆，或者自行 Google

https://github.com/cloudhead/less.js

{less} is more,really?

• 对 Hack 的支持问题

http://classtyle.com/jss/

{less} is more,really?

• 对 Hack 的支持问题• 团队协同开发的问题

Style.less

Style.css

团队维护哪个呢？

（增加维护成本）

My ViewPoints

类似于 ZenCoding ，能提高编写、组织 CSS 的效率； 装逼利器； 不盲目跟从，以学习一门新语言的心态来学习； 在团队合作中，除非有一个很好的使用环境与氛围， 否则就像某物一样，是一次性用品；

扩展阅读

• 10个加速CSS开发的CSS预处理器

• LESS介绍及其与Sass的差异

• Introducing the LESS CSS Grid

• LESS WIKI

ReeQi@2011-10

The EndThank you!