css less视频教程,lesscss入门教程.pdf

lesscss入门教程

左博尔@Zobor

Rss About Archive Search

cssless用法

Less 是一种动态的样式语言。Less扩展了CSS的动态行为 ，比如说 ，设置变量 (Variables )、混合书写模式 (mixins )、操作

(operations )和功能 (functions )等等 ，最棒的是 ，Less使用了现有的CSS语法 ，也就是说 ，你可以直接把你现成的样式文

件 “style.css”直接改成 “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引用到文件中 ，引用方式很简单 ：

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