lesscss入门教程.pdf

左博尔@Zobor Rss About Archive Search cssless用法 Less 是一种动态的样式语言。Less扩展了CSS的动态行为 ，比如说 ，设置变量 （Variables ）、混合书写模式 （mixins ）、操作 （operations ）和功能 （functions ）等等 ，最棒的是 ，Less使用了现有的CSS语法 ，也就是说 ，你可以直接把你现成的样式文 件 “style.css”直接改成 “style.less” ，他也能正常工作。如 ： link rel=stylesheet/less href=less/style.less / Less现在可以在客户端 （如 ：IE+,Webkit,Firefox ）和服务器 （如node.j s ）上运行。前面也说过Less是CSS的一种扩展 ，他不但 向后兼容 ，而且在现有的CSS语法基础上增加许多额外的功能。如果你具有一定的CSS语法基础 ，学习Less将是一件轻而易举的 事情 ，那么我们现在就开始吧 ，首先一起看一段用Less语法的CSS代码 ： .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { @val: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @val; -webkit-box-shadow: @val; -moz-box-shadow: @val; } .box { @base: #f938ab; color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0, 0, 5px, 0.4) } } 看到这里或许你现在并不知道这些代码表示的是什么意思 ？不过不要紧张 ，我们会一步一步一介绍这些语法表示的是什么意思。 别的先不说 ，我们一起动起来吧。 如何使用Less 要成功的使用Less ，需要一个脚本的支持 ，这个脚本我们把他叫做less.j s。大家可以在点击 这里 下载这个less脚本,并放到你的项 目中。下载好以后我们需要把less.j s引用到文件中 ，引用方式很简单 ： link rel=stylesheet/less type=text/css href=less/styles.less script src=js/less.js type=text/javascript/script Less包含些什么 ？ Less具体有哪些东东呢 ？其实这个问题我在前面早就有说过 ，Less要CSS语法的基础上进行了扩展 ，主要包含 ： Variables ， Mixins、Nested Rules、Functions Operations、Client-side usage、Server-side usage 等等 ，下面我们就针对这几 个部分 ，更好帮助我们了解和深入的学习Less。 1、变量——Variables Less中的变量充许你在样式中的某个地方对常用的值进行定义 ，然后应用到样式中 ，这样只要改变你定义的变量参数值就可以达 到改变全局的效果 ，我们先来看一段代码 ： Less Code /*======== 定义变量===========*/ @color: #4d926f; /*======== 应用到元素 中 ========*/ #header { color: @color; } h2 { color: @color; } Compiled Css code /*======= Less 编译成 css ======*/ #header { color: #4d926f; } h2 { color: #4d926f; } Less中的变量还具有计算功能 ，如 ： Less Code @nice-blue: #5b83ad; @light-blue: @nice-blue + #111; #header { color: @light-blue; } Compiled Css Co