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/
{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} 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!